版本

Editions

所有权

Ownership

当您购买Every Layout的许可时，您就拥有了由 Heydon Pickering 和 Andy Bell 创作和拥有的内容的许可。

When you purchase a licence for Every Layout, you own a license to the content that is authored and owned by Heydon Pickering and Andy Bell.

公平使用和再分配

Fair usage and redistribution

严禁重新发布和转售Every Layout，发现的情况将根据英国版权法合法追究。

Re-publishing and re-selling of Every Layout is strictly forbidden and discovered instances will be pursued, legally, in accordance with United Kingdom copyright law.

我们希望许可证持有者以公平的方式使用他们的许可证。我们非常信任我们的许可证持有者，因此我们可以尽可能顺畅地使用Every Layout 。我们相信您，作为许可证持有人，应该能够几乎没有障碍地访问您付费购买的内容，但这也意味着许可证很容易共享。

We expect licence holders to use their licence in a fair manner. We put a lot of trust in our licence holders so that we can make using Every Layout as frictionless as possible. We believe that you, the licence holder, should be able to access the content that you paid for with little to no barriers, but this also means that the licence is easily shared.

如果我们怀疑您没有以公平的方式使用您的许可证或不负责任地共享它，我们保留在发出合理警告后撤销您对Every Layout的访问权且不退款的权利。

If we suspect you are not using your license in a fair manner or sharing it irresponsibly, we reserve the right to revoke your access to Every Layout with no refunds, after a fair warning.

盒子模型

The box model

框模型是布局框所基于的公式，包括内容、填充、边框和边距。CSS 让我们改变这些值来改变元素显示的整体大小和形状。

The box model is the formula upon which layout boxes are based, and comprises content, padding, border, and margin. CSS lets us alter these values to change the overall size and shape of elements’ display.

Web 浏览器有助于将默认 CSS 样式应用于某些元素，这意味着它们以合理可读的方式进行布局：即使未应用作者 CSS。

Web browsers helpfully apply default CSS styles to some elements, meaning they are laid out in a reasonably readable fashion: even where author CSS has not been applied.

在 Chrome 中，段落 ( ) 的默认用户代理样式<p>看起来像……

In Chrome, the default user agent styles for paragraphs (<p>) look like…

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

...和无序列表 ( <ul>) 样式看起来像...

… and unordered list (<ul>) styles look like…

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

逻辑属性

Logical properties

什么是逻辑属性，它们的存在是否意味着不合逻辑的属性的存在？习惯于从左到右 ( direction: ltr) 和从上到下 ( writing-mode: horizontal-tb) 阅读的英语使用者发现在应用边距和填充等样式时使用包含单词“左”、“右”、“上”和“下”的属性是合乎逻辑的。

What are logical properties and does their existence imply the existence of illogical properties? English speakers accustomed to reading left to right (direction: ltr) and top to bottom (writing-mode: horizontal-tb) find it logical to use properties that include the words “left”, “right”, “top”, and “bottom” when applying styles like margin and padding.

.icon {
  margin-right: 0.5em;
}

当方向或书写模式改变时，这就变得不合逻辑了，因为左右（和/或顶部和底部）被翻转了。现在你放在右边的边距你真的需要放在左边。

It’s when the direction or writing mode changes that this becomes illogical, because left and right (and/or top and bottom) are flipped. Now the margin you put on the right you really need on the left.

逻辑属性避免使用像“左”和“右”这样的术语，因为我们知道它们可以颠倒，使这些术语变得毫无意义。相反，我们根据块和内联方向应用边距、填充和边框等样式。

Logical properties eschew terminology like “left” and “right” because we know they can be reversed, making the terms a nonsense. Instead, we apply styles like margin, padding, and border according to the block and inline direction.

.icon {
  margin-inline-end: 0.5em;
}

在一个ltr方向上，margin-inline-end向右应用边距。在一个rtl方向上，margin-inline-end向左应用边距。在这两种情况下，它都应用于需要的地方：在线维度的末尾。

In a ltr direction, margin-inline-end applies margin to the right. In a rtl direction, margin-inline-end applies margin to the left. In both cases, it is applied where it is needed: at the end of the inline dimension.

格式化上下文

Formatting contexts

当您将display: flexor应用display: grid到 a<div>时，它继续表现得像一个块元素，使用display: block. 但是，它改变了其子元素的行为方式。例如，仅display: flex（没有其他与 Flexbox 相关的属性）应用于父级，其子级将水平分布。或者，换句话说，流动方向从垂直切换到水平。

When you apply display: flex or display: grid to a <div>, it continues to behave like a block element, using display: block. However, it changes the way its child elements behave. For example, with just display: flex (and no other Flexbox-related properties) applied to the parent, its children will distribute themselves horizontally. Or, to put it another way, the flow direction is switched from vertical to horizontal.

格式化上下文是该项目中记录的许多布局的基础。它们将元素变成布局组件。在Composition中，我们将探讨如何嵌套不同的格式化上下文，以创建复合布局。

Formatting contexts are the basis of many of the layouts documented in this project. They turn elements into layout components. In Composition, we'll explore how different formatting contexts can be nested, to create composite layouts.

盒子里的东西

Content in boxes

Web 主要是文本信息的渠道，辅以图像和视频等媒体，通常统称为内容。浏览器结合了换行和滚动算法，以确保将内容完整地传输给用户，而不管他们的屏幕大小和尺寸以及缩放级别等设置如何。默认情况下，网络很大程度上是响应式的。

The web is a conduit for primarily textual information supplemented by media such as images and videos, often referred to collectively as content. Browsers incorporate line wrapping and scrolling algorithms to make sure content is transmitted to the user in its entirety, irrespective of their screen sizes and dimensions, and settings such as zoom level. The web is responsive largely by default.

在没有干预的情况下，元素的内容决定了它的大小和形状。内容使inline元素水平增长，block元素垂直增长。留给它自己的设备，盒子的面积由它包含的内容的面积决定。因为网页内容是动态的（可能会发生变化），所以网页布局的静态表示极具误导性。强烈建议从一开始就直接使用 CSS 及其灵活性，就像我们在这里一样。

Without intervention, it is the contents of an element that determines its size and shape. Content makes inline elements grow horizontally, and block elements grow vertically. Left to its own devices, the area of a box is determined by the area of the content it contains. Because web content is dynamic (subject to change), static representations of web layouts are extremely misleading. Working directly with CSS and its flexibility from the outset, as we are here, is highly recommended.

* {
  box-sizing: border-box;
}

content-box只有当盒子的高度或宽度受到限制时，和之间的差异border-box才会发挥作用。为了便于说明，请考虑将一个块元素放置在另一个块元素内。使用content-box模型和 的填充1rem，子元素将在应用（相当于在书写模式中）2rem时溢出。inline-size: 100%width: 100%horizontal-tb

Only where the height or width of a box is constrained does the difference between content-box and border-box come into play. For illustration, consider a block element placed inside another block element. Using the content-box model and a padding of 1rem, the child element will overflow by 2rem when inline-size: 100% (equivalent to width: 100% in a horizontal-tb writing mode) is applied.

为什么？因为inline-size: 100%意思是“使这个元素的宽度与父元素的宽度相同”。由于我们使用的是模型content-box，因此内容100%变宽了，然后将填充添加到该值上。

Why? Because inline-size: 100% means “make the width of this element the same as the parent element”. Since we are using the content-box model, the content is made 100% wide, then the padding is added on to this value.

但是如果我们使用inline-size: auto（我们可以只删除inline-size: 100%，因为auto是默认值）子框完全适合父框。这与价值无关。box-sizing

But if we use inline-size: auto (we can just remove inline-size: 100%, since auto is the default value) the child box fits within the parent box perfectly. And that’s regardless of the box-sizing value.

隐含地，height也设置为auto，这意味着它是从内容派生的。再次，box-sizing没有效果。

Implicitly, the height is also set to auto, meaning it is derived from the content. Again, box-sizing has no effect.

这里的教训是我们元素的维度应该主要从它们的内部内容和外部上下文中导出。当我们试图规定尺寸时，事情往往会出错。作为视觉设计师，我们应该做的就是就布局应该如何形成提出建议。例如，我们可能会应用一个min-height（如在Cover布局中）或提供一个flex-basis（如在Sidebar中）。

The lesson here is the dimensions of our elements should be largely derived from their inner content and outer context. When we try to prescribe dimensions, things tend to go amiss. All we should be doing as visual designers is making suggestions as to how the layout should take shape. We might, for instance, apply a min-height (as in the Cover layout) or proffer a flex-basis (as in the Sidebar).

建议的 CSS 是算法布局设计的核心。我们允许浏览器进行自己的计算，得出自己的结论，而不是告诉浏览器做什么，以最适合用户、他们的屏幕和设备。在任何情况下，任何人都不应体验模糊的内容。

The CSS of suggestion is at the heart of algorithmic layout design. Instead of telling browsers what to do, we allow browsers to make their own calculations, and draw their own conclusions, to best suit the user, their screen, and device. Nobody should experience obscured content under any circumstances.

组成和布局

Composition and layout

要了解组合如何使布局系统受益，让我们考虑一个示例组件。假设这个组件是一个对话框，因为界面（出于我们现在不会讨论的原因）需要一个对话框。这是它的样子：

To understand how composition benefits a layout system, let’s consider an example component. Let’s say that this component is a dialog box, because the interface (for reasons we won’t get into right now) requires a dialog box. Here is what it looks like:

但它是怎么变成那样的呢？一种方法是编写一些专用的对话框 CSS。您可以为对话框提供一个“块”标识符（.dialog在 CSS 和class="dialog"HTML 中）并将其用作您的名称空间以附加样式声明。

But how does it get to look like that? One way is to write some dedicated dialog CSS. You might give the dialog box a “block” identifier (.dialog in CSS, and class="dialog" in HTML) and use this as your namespace to attach style declarations.

.dialog {
  /* ... */
}

.dialog__header {
  /* ... */
}

.dialog__body {
  /* ... */
}

.dialog__foot {
  /* ... */
}

或者，这些对话框样式可能是从第三方 CSS 库/框架导入的。在任何一种情况下，许多用于使对话框看起来像对话框的 CSS 都可以用于制作其他类似的布局。但是由于这里的所有内容都在 下命名空间.dialog，当我们开始制作下一个组件时，我们最终将复制可能共享的样式。这是大多数 CSS 膨胀的来源。

Alternatively, these dialog styles might be imported from a third-party CSS library/framework. In either case, a lot of the CSS used to make the dialog look like a dialog, could be used to make other, similar layouts. But since everything here is namespaced under .dialog, when we come to make the next component, we’ll end up duplicating would-be shared styles. This is where most CSS bloat comes from.

这namespacing部分是这里的关键。继承心态鼓励我们在决定 UI 的哪些最终部分可以做什么之前考虑应该调用它们，或者其他更小的部分可以为它们做什么。这就是合成的用武之地。

The namespacing part is key here. The inheritance mindset encourages us to think about what finalized parts of UI should be called before we’ve even decided what they do, or what other, smaller parts can do for them. That’s where composition comes in.

布局原语

Layout primitives

上一个示例中的错误是认为对话框表单的所有内容都是孤立和独特的，而实际上，它只是简单布局的组合。Every Layout的目的是识别和记录这些较小的布局中的每一个。我们一起称它们为primitives。

The mistake in the last example was to think of everything about the dialog’s form as isolated and unique when, really, it's just a composition of simpler layouts. The purpose of Every Layout is to identify and document what each of these smaller layouts are. Together, we call them primitives.

术语原始具有语言、数学和计算内涵。在每种情况下，原语都是没有自己意义或目的的东西，但可以在组合中使用它来制作有意义的东西，或词汇。在语言中，它可能是一个词或短语，在数学中可能是一个方程式，在设计中可能是一个模式，或者在开发中可能是一个组件。

The term primitive has linguistic, mathematical, and computing connotations. In each case, a primitive is something without its own meaning or purpose as such, but which can be used in composition to make something meaningful, or lexical. In language it might be a word or phrase, in mathematics an equation, in design a pattern, or in development a component.

在 JavaScript 中，布尔数据类型是原始数据类型。仅在上下文之外查看值true（或false）并不能告诉您有关更大的 JavaScript 应用程序的信息。另一方面，对象数据类型不是原始数据类型。您不能在不指定自己的属性的情况下编写对象。因此，对象是有意义的；他们必然会告诉您作者的意图。

In JavaScript, the Boolean data type is a primitive. Just looking at the value true (or false) out of context tells you very little about the larger JavaScript application. The object data type, on the other hand, is not primitive. You cannot write an object without designating your own properties. Objects are therefore meaningful; they necessarily tell you something of the author’s intent.

对话框作为 UI 的一部分是有意义的，但它的组成部分却不是。以下是我们如何使用Every Layout 的布局原语来组合对话框：

The dialog is meaningful, as a piece of UI, but its constituent parts are not. Here’s how we might compose the dialog box using Every Layout’s layout primitives:

使用许多相同的原语，我们可以创建一个注册表单……

Using many of the same primitives, we can create a registration form…

......或会议演讲的幻灯片布局：

… or a slide layout for a conference talk:

如果没有原始数据类型，您将不得不不断地教您的编程语言如何进行基本操作。您很快就会忘记最初打算使用该语言完成的具体、有意义的任务。不利用基元的设计系统同样存在问题。如果模式库中的每个组件都遵循自己的布局规则，那么效率低下和不一致的情况就会比比皆是。

Without primitive data types, you would have to be constantly teaching your programming language how to do basic operations. You would quickly lose sight of the specific, meaningful task you set out to accomplish with the language in the first place. A design system that does not leverage primitives is similarly problematic. If every component in your pattern library follows its own rules for layout, inefficiencies and inconsistencies will abound.

每个图元都有一个简单的职责：“垂直空间元素”、“均匀填充元素”、“水平分隔元素”等。它们被设计用于组合，作为彼此的父母、孩子或兄弟姐妹。

The primitives each have a simple responsibility: "space elements vertically", "pad elements evenly", "separate elements horizontally", etc. They are designed to be used in composition, as parents, children, or siblings of one another.

您可能无法单独使用Every Layout 的 原语来创建每个布局。但您当然可以制作大多数（如果不是全部）常见的网页布局，并实现许多您自己的独特构想。

You probably cannot create literally every layout using Every Layout's primitives alone. But you can certainly make most, if not all, common web layouts, and achieve many of your own unique conceptions.

无论如何，您应该理解和欣赏组合的好处，以及使用少量可重用代码创建各种界面的能力。英文字母表只有 26 个字节，想想用它创作的所有伟大作品吧！

In any case, you should walk away with an understanding and appreciation for the benefits of composition, and the power to create all sorts of interfaces with just a little reusable code. The English alphabet is only 26 bytes, and think of all the great works created with that!

缩放和可访问性

Scaling and accessibility

使用该px单位进行设计不仅会鼓励我们采用错误的思维方式：还有明显的局限性。其一，当您使用 设置字体时px，浏览器假定您希望将字体固定为该大小。因此，用户在浏览器设置中选择的字体大小将被忽略。

Designing using the px unit doesn’t only encourage us to adopt the wrong mindset: there are manifest limitations as well. For one, when you set your fonts using px, browsers assume you want to fix the fonts at that size. Accordingly, the font size chosen by the user in their browser settings is disregarded.

随着现代浏览器现在支持整页缩放（其中包括文本在内的所有内容都按比例缩放），这通常被认为是一个已解决的问题。然而，正如Evan Minto 发现的那样，与浏览器 Edge 或 Internet Explorer 的用户相比，在浏览器设置中调整默认字体大小的用户更多。也就是说：忽视调整其默认字体大小的用户与忽视整个浏览器一样具有影响力。

With modern browsers now supporting full page zoom (where everything, including text is zoomed proportionately), this is often blown off as a solved problem. However, as Evan Minto discovered, there are more users who adjust their default font size in browser settings than there are users of the browsers Edge or Internet Explorer. That is: disregarding users who adjust their default font size is as impactful as disregarding whole browsers.

单位em、rem、ch和ex不存在这样的问题，因为它们都是相对于用户在操作系统和/或浏览器中设置的默认字体大小的单位。当然，浏览器使用这些单位将值转换为像素，但这种方式对上下文和配置很敏感。相关单位为仲裁员。

The units em, rem, ch, and ex present no such problem because they are all units relative to the user’s default font size, as set in their operating system and/or browser. Browsers translate values using these units into pixels, of course, but in such a way that’s sensitive to context and configuration. Relative units are arbitrators.

相对论

Relativity

浏览器和操作系统通常只为用户提供调整基本或主体字体大小的能力。这可以表示为1rem：恰好是根字体大小的一倍。您的段落元素应始终为1rem，因为它们代表正文。您不需要1rem明确设置，因为它是默认值。

Browsers and operating systems typically only afford users the ability to adapt the base or body font size. This can be expressed as 1rem: exactly one times the root font size. Your paragraph elements should always be 1rem, because they represent body text. You don’t need to set 1rem explicitly, because it’s the default value.

:root {
  /* ↓ redundant */
  font-size: 1rem;
}

p {
  /* ↓ also redundant */
  font-size: 1rem;
}

元素，如标题，应该设置得相对较大——否则层次结构将丢失。例如，我<h2>可能是2.5rem。

Elements, like headings, should be set relatively larger — otherwise hierarchy will be lost. My <h2> might be 2.5rem, for example.

h2 {
  /* ↓ 2.5 × the root font-size */
  font-size: 2.5rem;
}

虽然单位em、rem、ch和ex都是文本的度量单位，但它们当然可以应用于margin、padding和border属性（以及其他）。只是文本是网络媒体的基础，而这些单位是对这一事实的方便和不断的提醒。学习从文本的内在维度推断布局，您的设计将会很漂亮。

While the units em, rem, ch, and ex are all measurements of text, they can of course be applied to the margin, padding, and border properties (among others). It’s just that text is the basis of the web medium, and these units are a convenient and constant reminder of this fact. Learn to extrapolate your layouts from your text’s intrinsic dimensions and your designs will be beautiful.

比例性和可维护性

Proportionality and maintainability

我<h2>的是根/基大小的 2.5 倍。如果我扩大根的大小，我的<h2>——以及所有其他以基倍数设置的维度——将按比例rem扩大。结果是缩放整个界面是微不足道的：

My <h2> is 2.5 times the root/base size. If I enlarge the root size, my <h2>—and all the other dimensions set in rem-based multiples—will by enlarged proportionately. The upshot is that scaling the entire interface is trivial:

@media (min-width: 960px) {
  :root {
    /* ↓ Upscale by 25% at 960px */
    font-size: 125%;
  }
}

如果我改为采用px，对维护的影响将很明显：缺乏相对和比例大小将需要逐个调整各个元素。

If I had instead adopted px, the implications for maintenance would be clear: the lack of relative and proportional sizing would require adjusting individual elements case-by-case.

h3 {
  font-size: 32px;
}
h2 {
  font-size: 40px;
}

@media (min-width: 960px) {
  h3 {
    font-size: 40px;
  }
  h2 {
    font-size: 48px;
  }
  /* etc etc ad nauseum */
}

视口单位

Viewport units

在Every Layout中，我们避免基于宽度的@media查询。它们代表布局重新配置的硬编码，并且对实际提供给相关元素或组件的即时可用空间不敏感。在离散断点处缩放界面，如上一个示例所示，是任意的。有什么特别之处960px？我们真的可以说较小的尺寸是可以接受的959px吗？

In Every Layout, we eschew width-based @media queries. They represent the hard coding of layout reconfigurations, and are not sensitive to the immediate available space actually afforded the element or component in question. Scaling the interface at a discrete breakpoint, as in the last example, is arbitrary. What’s so special about 960px? Can we really say the smaller size is acceptable at 959px?

视口单位与浏览器视口的大小有关。例如，1vw等于屏幕宽度的1vh1%，等于屏幕高度的 1%。使用视口单位，calc()我们可以创建一种算法，其中尺寸按比例缩放，但从最小值开始。

Viewport units are relative to the browser viewport’s size. For example, 1vw is equal to 1% of the screen’s width, and 1vh is equal to 1% of the screen’s height. Using viewport units and calc() we can create an algorithm whereby dimensions are scaled proportionately, but from a minimum value.

:root {
  font-size: calc(1rem + 0.5vw);
}

等式的1rem一部分确保font-size永远不会低于默认（系统/浏览器/用户定义）值。也就是说，1rem + 0vw是1rem。

The 1rem part of the equation ensures the font-size never drops below the default (system/browser/user defined) value. That is, 1rem + 0vw is 1rem.

em单位_

The em unit

em单位之于单位rem就像容器查询之于@media查询。它与直接上下文相关，而不是外部文档。如果我想在我<strong>的 中稍微放大一个元素，我可以使用单位：font-size<h2>em

The em unit is to the rem unit what a container query is to a @media query. It pertains to the immediate context rather than the outer document. If I wanted to slightly enlarge a <strong> element’s font-size within my <h2>, I could use em units:

h2 {
  font-size: 2.5rem;
}

h2 strong {
  font-size: 1.125em;
}

该<strong>'sfont-size现在1.125 × 2.5rem，或2.53125rem。如果我为它设置一个rem值<strong>，它就不会随着它的父级缩放<h2>：如果我改变了这个h2值，我也必须改变h2 strongCSS 值。

The <strong>’s font-size is now 1.125 × 2.5rem, or 2.53125rem. If I set a rem value for the <strong> instead, it wouldn’t scale with its parent <h2>: if I changed the h2 value, I would have to change the h2 strong CSS value as well.

根据经验，em单位更适合调整行内元素的大小，而rem单位更适合块元素。SVG 图标是基于 - 调整大小的完美候选者em，因为它们要么伴随文本，要么取代文本。

As a rule of thumb, em units are better for sizing inline elements, and rem units are better for block elements. SVG icons are perfect candidates for em-based sizing, since they either accompany or supplant text.

h2,
h3 {
  max-inline-size: 60ch;
}

h3 {
  font-size: 2rem;
}
h2 {
  font-size: 2.5rem;
}

什么是全局样式？

What are global styles?

当人们谈论 CSS 的全局性时，他们可能指的是几种不同的事物之一。他们可能指的是全局继承:root的或<body>元素的规则（只有少数例外）。

When people talk about the global nature of CSS, they can mean one of a few different things. They may be referring to rules on the :root or <body> elements that are inherited globally (with just a few exceptions).

:root {
  /* ↓ Now (almost) all elements display a sans-serif font */
  font-family: sans-serif;
}

或者，它们可能意味着使用非限定*选择器直接为所有元素设置样式。

Alternatively, they may mean using the unqualified * selector to style all elements directly.

* {
  /* ↓ Now literally all elements display a sans-serif font */
  font-family: sans-serif;
}

元素选择器更具体，只针对它们命名的元素。但它们仍然是“全球性的”，因为无论它们位于何处，它们都可以接触到这些元素。

Element selectors are more specific, and only target the elements they name. But they are still “global” because they can reach those elements wherever they are situated.

p {
  /* ↓ Wherever you put a paragraph, it’ll be sans-serif */
  font-family: sans-serif;
}

元素选择器的自由使用是综合设计系统的标志。元素选择器负责通用原子，例如标题、段落、链接和按钮。与使用类时不同（见下文），元素选择器可以针对所见即所得编辑器和markdown生成的任意、无属性的内容。

A liberal use of element selectors is the hallmark of a comprehensive design system. Element selectors take care of generic atoms such as headings, paragraphs, links, and buttons. Unlike when using classes (see below), element selectors can target the arbitrary, unattributed content produced by WYSIWYG editors and markdown.

Every Layout的布局不会探索或规定简单元素的样式；那是你决定的。我们在这里感兴趣的是将简单元素嵌入到复合布局中。

The layouts of Every Layout do not explore or prescribe styles for simple elements; that is for you to decide. It is the imbrication of simple elements into composite layouts that we are interested in here.

最后，一旦定义了基于类的样式，就可以将其附加到文档中任何位置的任何 HTML 元素。这些比元素样式更可移植和可组合，但需要作者直接影响标记。

Finally, class-based styles, once defined, can be adhered to any HTML element, anywhere in a document. These are more portable and composable than element styles, but require the author to affect the markup directly.

.sans-serif {
  font-family: sans-serif;
}

<div class="sans-serif">...</div>

<small class="sans-serif">...</small>

<h2 class="sans-serif">...</h2>

应该认识到利用 CSS 规则的全球影响力是多么重要。CSS 本身的存在是为了在全局范围内按类别启用 HTML 样式，而不是逐个元素。按预期使用时，它是在网络上创建任何类型的布局或美学的最有效方式。在适当使用全局样式技术（例如上面的技术）的情况下，将品牌/美学与布局分开，并将两者视为单独的关注点会容易得多。

It should be appreciated how important it is to leverage the global reach of CSS rules. CSS itself exists to enable the styling of HTML globally, and by category, rather than element-by-element. When used as intended, it is the most efficient way to create any kind of layout or aesthetic on the web. Where global styling techniques (such as the ones above) are used appropriately, it’s much easier to separate branding/aesthetic from layout, and treat the two as separate concerns.

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.75rem;
}

.sidebar h2 {
  font-size: 1.75rem;
}

/* ↓ Backslash to escape the colon */
.font-size\:base {
  font-size: 1rem;
}

.font-size\:biggish {
  font-size: 1.75rem;
}

.font-size\:big {
  font-size: 2.25rem;
}

:root {
  --font-size-base: 1rem;
  --font-size-biggish: 1.75rem;
  --font-size-big: 2.25rem;
}

/* elements */

h3 {
  font-size: var(--font-size-biggish);
}
h2 {
  font-size: var(--font-size-big);
}

/* utilities */

.font-size\:base {
  font-size: var(--font-size-base) !important;
}

.font-size\:biggish {
  font-size: var(--font-size-biggish) !important;
}

.font-size\:big {
  font-size: var(--font-size-big) !important;
}

本地或“作用域”样式

Local or 'scoped' styles

值得注意的是，id属性/特性（出于可访问性的原因，最重要的是）只能在每个文档的一个 HTML 元素上使用。因此，通过选择器的样式id仅限于一个实例。

Notably, the id attribute/property (for reasons of accessibility, most importantly) can only be used on one HTML element per document. Styling via the id selector is therefore limited to one instance.

#unique {
  /* ↓ Only styles id="unique" */
  font-family: sans-serif;
}

选择id器具有非常高的特异性，因为它假定独特的样式在所有情况下都旨在覆盖竞争的通用样式。

The id selector has a very high specificity because it’s assumed unique styles are intended to override competing generic styles in all cases.

当然，没有什么比使用属性/特性将样式直接应用于元素更“本地”或特定于实例的了：style

Of course, there’s nothing more “local” or instance specific than applying styles directly to elements using the style attribute/property:

<p style="font-family: sans-serif">...</p>

唯一剩下的本地化样式标准在 Shadow DOM 中。通过将元素设为 a shadowRoot，可以使用只影响该父元素内部元素的低特异性选择器。

The only remaining standard for localizing styles is within Shadow DOM. By making an element a shadowRoot, one can use low-specificity selectors that only affect elements inside that parent.

const elem = document.querySelector('div');
const shadowRoot = elem.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
  <style>
    p {
      /* ↓ Only styles <p>s inside the element’s Shadow DOM */
      font-family: sans-serif;
    }
  </style>
  <p>A sans-serif paragraph</p>
`;

基元和道具

Primitives and props

正如Composition中所述， Every Layout的主要焦点在于有助于将元素/框排列在一起的简单布局原语。这些是用于引发布局的主要工具，并在通用全局样式和实用程序之间占据一席之地。

As set out in Composition, the main focus of Every Layout is on the simple layout primitives that help to arrange elements/boxes together. These are the primary tools for eliciting layout and take their place between generic global styles and utilities.

1. 通用（包括继承）样式
2. 布局原语
3. 实用类

表现为可重用组件，使用自定义元素规范，这些布局可以在全球范围内使用。但是使用道具（属性）可以对这些布局进行独特的配置。

Manifested as reusable components, using the custom elements specification, these layouts can be used globally. But unique configurations of these layouts are possible using props (properties).

stack-l {
  display: block;
}

stack-l > * + * {
  margin-top: var(--s1);
}

get space() {
  return this.getAttribute('space') || 'var(--s1)';
}

<stack-l space="var(--s3)">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</stack-l>

<stack-l data-i="Stack-var(--s3)" space="var(--s3)">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</stack-l>

<style id="Stack-var(--s3)">
  [data-i='Stack-var(--s3)'] > * + * {
    margin-top: var(--s3);
  }
</style>

视觉和谐

Visual harmony

我们也应该以视觉布局的和谐为目标。就像弹拨弦的声音一样，它应该是连贯的。鉴于我们主要处理文本，将line-height视为推断空白值的基础是明智的。字体大小（隐含地）1rem和line-height1.5 创建默认值1.5rem. 和谐较大的空间可能是3rem(2 ⨉ 1.5) 或4.5rem(3 ⨉ 1.5)。

We should aim for harmony in our visual layout too. Like the sound of a plucked string, it should be cohesive. Given we’re working predominantly with text, it’s sensible to treat the line-height as a basis for extrapolating values for white space. A font-size of (implicitly) 1rem, and a line-height of 1.5 creates a default value of 1.5rem. A harmoniously larger space might be 3rem (2 ⨉ 1.5) or 4.5rem (3 ⨉ 1.5).

通过在每个步骤中添加 1.5 来创建序列会导致较大的间隔。相反，我们可以乘以 1.5。结果还是正常的；增量更小。

Creating a sequence by adding 1.5 at each step results in large intervals. Instead, we can multiply by 1.5. The result is still regular; the increments just smaller.

1 * 1.5; // 1.5
1.5 * 1.5; // 2.25
1.5 * 1.5 * 1.5; // 3.375

该算法称为模块化音阶，就像音阶一样旨在产生和声。如何在设计中使用它取决于您使用的技术。

This algorithm is called a modular scale, and like a musical scale is intended for producing harmony. How you employ it in your design depends on what technology you are using.

自定义属性

Custom properties

在 CSS 中，您可以使用自定义属性和calc()支持简单算术的函数来描述模块化比例尺。

In CSS, you can describe a modular scale using custom properties and the calc() function, which supports simple arithmetic.

在以下示例中，我们除以或乘以设置的--ratio自定义属性（变量）以在我们的刻度上创建点。我们可以利用已经设置的点来生成新的点。也就是说，var(--s2) * var(--ratio)相当于var(--ratio) * var(--ratio) * var(--ratio).

In the following example, we divide or multiply by the set --ratio custom property (variable) to create the points on our scale. We can make use of already set points to generate new ones. That is, var(--s2) * var(--ratio) is equivalent to var(--ratio) * var(--ratio) * var(--ratio).

:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
}

JavaScript 访问

JavaScript access

我们的比例变量放置在:root元素上，使它们在全球范围内可用。所谓全球化，我们指的是真正的全球化。自定义属性可用于 JavaScript，也可“穿透”Shadow DOM 边界以影响样式表的 CSS shadowRoot。

Our scale variables are placed on the :root element, making them globally available. And by global, we mean truly global. Custom properties are available to JavaScript and also “pierce” Shadow DOM boundaries to affect the CSS of a shadowRoot stylesheet.

JavaScript 使用 JSON 属性等 CSS 自定义属性。您可以将全局自定义属性视为 CSS 和 JavaScript 共享的配置。以下是您如何--s3使用 JavaScript（document.documentElement代表:root, 或<html>元素）在刻度上取得分数：

JavaScript consumes CSS custom properties like JSON properties. You can think of global custom properties as configurations shared by CSS and JavaScript. Here’s how you would get the --s3 point on the scale using JavaScript (document.documentElement represents the :root, or <html> element):

const rootStyles = getComputedStyle(document.documentElement);
const scale3 = rootStyles.getPropertyValue('--s3');

this.shadowRoot.innerHTML = `
  <style>
    :host {
      padding: var(--s3);
    }
  </style>
  <slot></slot>
`;

<my-element padding="var(--s3)">
  <!-- Light DOM contents -->
</my-element>

this.shadowRoot.innerHTML = `
  <style>
    :host {
      padding: ${this.padding};
    }
  </style>
  <slot></slot>
`;

  get padding() {
    return this.getAttribute('padding') || 'var(--s1)';
  }

  set padding(val) {
    return this.setAttribute('padding', val);
  }

if (!/(?<!\S)\d(?!\S)/.test(this.padding)) {
  console.error('<my-component>’s padding value should be a number representing a point on the modular scale');
  return;
}

措施

Measure

一行文本的宽度（以字符为单位）称为其度量值。选择合理的措施对于舒适地扫描连续线条至关重要。The Elements Of Typographic Style认为 45 到 75 之间的任何值都是合理的。

The width of a line of text, in characters, is known as its measure. Choosing a reasonable measure is critical for the comfortable scanning of successive lines. The Elements Of Typographic Style considers any value between 45 and 75 reasonable.

为印刷媒体设置衡量标准相对简单。它只是纸制品的宽度除以放置在其中的文本栏的数量——当然减去边距和间距。

Setting a measure for print media is relatively straightforward. It is simply the width of the paper artefact divided by the number of text columns placed within it — minus margins and gutters, of course.

网络不像印刷品那样是静态的或可预测的。每个单词由一个分隔符分隔（unicode 点 U+0020），释放文本运行以根据可用空间动态换行。可用空间量由许多相互关联的因素决定，包括设备大小和方向、文本大小和缩放级别。

The web is not static or predictable like print. Each word is separated by a breaking space (unicode point U+0020), freeing runs of text to wrap dynamically according to available space. The amount of available space is determined by a number of interrelated factors including device size and orientation, text size, and zoom level.

作为设计师，我们寻求控制用户的体验。但是，正如 John Allsopp 在 2000 年的The Dao Of Web Design中所写，试图直接控制用户在网络上消费内容的方式是鲁莽的。执行特定措施意味着设置固定宽度。许多用户会遇到水平滚动和损坏的缩放功能。

As designers, we seek to control the users’ experience. But, as John Allsopp wrote in 2000’s The Dao Of Web Design, attempting direct control over the way users consume content on the web is foolhardy. Enforcing a specific measure would mean setting a fixed width. Many users would experience horizontal scrolling and broken zoom functionality.

要设计“自适应页面”（Allsopp 的术语），我们必须放弃对浏览器用于自动布置网页的算法（如文本换行）的控制。但这并不是说没有影响布局的地方。将自己视为浏览器的导师，而不是它的微观管理者。

To design “adaptable pages” (Allsopp’s term), we must relinquish control to the algorithms (like text wrapping) browsers use to lay out web pages automatically. But that’s not to say there’s no place for influencing layout. Think of yourself as the browser’s mentor, rather than its micro-manager.

测度公理

The measure axiom

尝试用简短的短语或句子列出设计公理是一种很好的做法。在这种情况下，该语句可能是“该度量不应超过 60ch”。

It’s good practice to try and set out a design axiom in a short phrase or sentence. In this case that statement might be, “the measure should never exceed 60ch”.

衡量什么？在哪里？任何一行文本都没有理由变得太长。与所有公理一样，这个公理应该无条件或例外地遍及设计。真正的问题是：如何？在全局和本地样式中，我们列出了三个主要的样式层：

The measure of what? And where? There’s no reason why any line of text should become too lengthy. This axiom, like all axioms, should pervade the design without qualifications or exceptions. The real question is: how? In Global and local styling we set out three main tiers of styling:

1. 通用（包括继承）样式
2. 布局原语
3. 实用类

度量公理应尽可能普遍地植入通用样式中，但也可用于布局基元（请参阅组合）和实用程序类。但首先，哪个属性和哪个值应该写入规则？

The measure axiom should be seeded as pervasively as possible in the universal styles, but also made available to layout primitives (see Composition) and utility classes. But first, which property and which value should inscribe the rule?

声明书

The declaration

固定宽度（和高度！）是响应式设计的诅咒，正如我们在Boxes和此处再次建立的那样。相反，我们应该处理公差。例如，该max-inline-size属性在任何书写模式下都可以容忍任何长度的文本，最高可达特定值。

Fixed widths (and heights!) are anathema to responsive design, as we established in Boxes and again here. Instead, we should deal in tolerances. The max-inline-size property, for example, tolerates any length of text, in any writing mode, up to a certain value.

p {
  max-inline-size: 700px;
}

这就是所涵盖的财产。但是，px单位有问题。我们也许能够通过肉眼判断，这700px为给定的 创造了一个合理的衡量标准font-size。但给定font-size的实际上只是font-size我们当时恰好显示的屏幕——这是我们对自己设计的狭隘看法。

That’s the property covered. However, the px unit is problematic. We may be able to judge, by eye, that 700px creates a reasonable measure for the given font-size. But the given font-size is really just the font-size our screen happens to be displaying at the time — it’s our parochial view of our own design.

更改font-size段落或调整默认系统字体大小，将创建不同的（最大）度量。因为字符长度和像素宽度之间没有关系，所以我们没有算法可以保证正确的最大度量值。

Changing font-size for paragraphs, or adjusting the default system font size, will create a different (maximum) measure. Because there is no relationship between character length and pixel width, we do not have an algorithm that can guarantee the correct maximum measure value.

幸运的是，CSS 包括ch单位。的值1ch基于字体0字符的宽度。重要的是，这意味着改变font-size的值1ch，从而调整度量。使用ch单位是一种天生的算法测量方法，因为结果取决于您允许浏览器为您进行的计算。

Fortunately, CSS includes the ch unit. The value of 1ch is based on the width of the font’s 0 character. Importantly, this means changing the font-size changes the value of 1ch, thereby adapting the measure. Using ch units is an innately algorithmic approach to measure, because the outcome is predicated on a calculation you permit the browser to make for you.

使用ch使我们能够独立于执行公理font-size，使其高度普遍并且没有“出错”的危险。在某些文档中， “测量不应超过 60ch”可能是注释，它可以是直接编码到设计特征中的质量。

Using ch enables us to enforce the axiom independent of font-size, allowing it to be highly pervasive and in no danger of “going wrong”. Where "the measure should never exceed 60ch" might have been a note in some documentation, it can instead be a quality directly coded into the design’s character.

全局默认值

Global defaults

要实现这个公理，我们需要确保所有适用的元素都服从它。这是选择器的问题。我们可以创建一个类选择器……

To realize the axiom, we need to ensure all applicable elements are subject to it. This is a question of selectors. We could create a class selector…

.measure-cap {
  max-inline-size: 60ch;
}

…但是过早地从（实用程序）类的角度思考是错误的。这意味着手动将样式应用于 HTML 中的各个元素，只要我们认为它适用。手动干预很费力，容易出错（缺少元素），并且会导致标记过大。

…but it’s a mistake to think in terms of (utility) classes too early. It would mean applying the style manually, to individual elements in the HTML, wherever we felt it was applicable. Manual intervention is laborious, prone to error (missing elements out), and will lead to bloated markup.

相反，我们应该问自己规则可能适用于哪些类型的元素。当然是为文本设计的流元素。<em>像和这样的内联元素<small>不需要包含在内，因为它们只会占用其父流元素总度量的一部分。

Instead, we should ask ourselves which types of elements the rule might apply to. Certainly flow elements designed for text. Inline elements like <em> and <small> would not need to be included, since they would take up only a part of their parent flow elements’ total measure.

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
  max-inline-size: 60ch;
}

* {
  max-inline-size: 60ch;
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

:root {
  --measure: 60ch;
}

* {
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

.max-inline-size\:measure {
  max-inline-size: var(--measure);
}

.max-inline-size\:measure\/2 {
  max-inline-size: calc(var(--measure) / 2);
}

在复合布局中测量

Measure in composite layouts

某些布局原语不可避免地接受与测量相关的道具，并且一些使用var(--measure). Switcher有一个thresholdprop 定义布局在水平和垂直配置之间切换的容器宽度：

Certain layout primitives inevitably accept measure-related props, and some set default values for those props using var(--measure). The Switcher has a threshold prop that defines the container width at which the layout switches between a horizontal and vertical configuration:

get threshold() {
  return this.getAttribute('threshold') || 'var(--measure)';
}

set threshold(val) {
  return this.setAttribute('threshold', val);
}

这是一个合理的默认值，但可以很容易地用任何字符串值覆盖：

This is a sensible default, but can easily be overridden with any string value:

<switcher-l threshold="20rem">...</switcher-l>

如果我们将非法值传递给threshold，声明将被删除，切换器的后备样式表将应用默认值。该样式表如下所示：

If we pass an illegitimate value to threshold, the declaration will be dropped, and the Switcher’s fallback stylesheet will apply the default value anyway. Here’s what that stylesheet looks like:

switcher-l {
  display: flex;
  flex-wrap: wrap;
}

switcher-l > * {
  flex-basis: calc((var(--measure) - 100%) * 999);
  flex-grow: 1;
}

我们的衡量方法是我们假设控制的方法，但是一种对浏览器的工作方式和用户操作它们的方式尊重的缓和控制。许多管理您的设计的“公理”，例如“正文字体将是 Font X”或“标题将是深蓝色”不会对布局本身产生影响，从而使它们更易于仅使用全局样式来应用。当布局进入等式时，请注意不同的配置和方向。选择使浏览器能够代表您计算最合适的布局的属性、值和单位。

Our approach to measure is one where we assume control, but a tempered kind of control that's deferential towards the way browsers work and users operate them. Many of the 'axioms' that govern your design, like "the body font will be Font X" or "headings will be dark blue" will not have an impact on layout as such, making them much simpler to apply just with global styles. When layout comes into the equation, be wary of differing configurations and orientations. Choose properties, values, and units that enable the browser to calculate the most suitable layout on your behalf.

问题

The problem

流元素需要空间（有时称为空白）以在物理上和概念上将它们与它们之前和之后的元素分开。这就是margin财产的目的。

Flow elements require space (sometimes referred to as white space) to physically and conceptually separate them from the elements that come before and after them. This is the purpose of the margin property.

然而，设计系统孤立地构思元素和组件。在构思的时候，还没有确定是否会有周围的内容，或者那个内容的性质是什么。一个元素或组件可能会出现在不同的上下文中，对间距的要求也会有所不同。

However, design systems conceive elements and components in isolation. At the time of conception, it is not settled whether there will be surrounding content or what the nature of that content will be. One element or component is likely to appear in different contexts, and the requirement for spacing will differ.

我们习惯于直接对元素或元素类进行样式化：我们使样式声明属于元素。通常，这不会产生任何问题，但margin实际上是两个邻近元素之间关系的一个属性。因此下面的代码是有问题的：

We are in the habit of styling elements, or classes of elements, directly: we make style declarations belong to elements. Typically, this does not produce any issues, but margin is really a property of the relationship between two proximate elements. The following code is therefore problematic:

p {
  margin-bottom: 1.5rem;
}

由于声明对上下文不敏感，因此任何正确应用边距都是运气问题。如果该段落前面有另一个元素，则效果是理想的。但是一个:last-child段落会产生多余的边距。在填充的父元素内，这个冗余边距与父元素的填充相结合，产生双倍的预期空间。这只是这种方法产生的问题之一。

Since the declaration is not context sensitive, any correct application of the margin is a matter of luck. If the paragraph is proceeded by another element, the effect is desirable. But a :last-child paragraph produces a redundant margin. Inside a padded parent element, this redundant margin combines with the parent’s padding to produce double the intended space. This is just one problem this approach produces.

解决方案

The solution

诀窍是为上下文设置样式，而不是单个元素。Stack布局原语通过它们的共同父元素在元素之间注入边距：

The trick is to style the context, not the individual element(s). The Stack layout primitive injects margin between elements via their common parent:

.stack > * + * {
  margin-block-start: 1.5rem;
}

使用相邻兄弟组合符 ( +)，margin-block-start仅适用于元素前面有另一个元素的情况：没有“剩余”边距。通用（或通配符）选择器 ( *) 确保所有元素都受到影响。关键* + *构造称为owl。

Using the adjacent sibling combinator (+), margin-block-start is only applied where the element is preceded by another element: no “left over” margin. The universal (or wildcard) selector (*) ensures any and all elements are affected. The key * + * construct is known as the owl.

.stack * + * {
  margin-block-start: 1.5rem;
}

[class^='stack'] > * {
  /* top and bottom margins in horizontal-tb writing mode */
  margin-block: 0;
}

.stack-large > * + * {
  margin-block-start: 3rem;
}

.stack-small > * + * {
  margin-block-end: 0.5rem;
}

.stack > * + * {
  margin-block-start: var(--space, 1.5em);
}

.stack-exception,
.stack-exception + * {
  --space: 3rem;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

.stack > :nth-child(2) {
  margin-block-end: auto;
}

这可以在以下描述演示文稿/幻灯片编辑器的演示中的上下文中看到。右侧的Cover66.666vh元素的最小高度为，强制左侧边栏的高度高于其内容。这就是在幻灯片图像和“添加幻灯片”按钮之间产生间隙的原因。

This can be seen working in context in the following demo depicting a presentation/slides editor. The Cover element on the right has a minimum height of 66.666vh, forcing the left sidebar's height to be taller than its content. This is what produces the gap between the slide images and the "Add slide" button.

Stack是其父级的唯一子级，没有任何东西像上一个示例/演示那样强制它伸展。的高度100%确保Stack 的高度与父级的高度相匹配，并且可以发生拆分。

Where the Stack is the only child of its parent, nothing forces it to stretch as in the last example/demo. A height of 100% ensures the Stack's height matches the parent's and the split can occur.

.stack:only-child {
  /* ↓ `height` in horizontal-tb writing mode */
  block-size: 100%;
}

用例

Use cases

Stack布局的潜在作用怎么估计都不过分。任何元素堆叠在一起的地方，很可能Stack应该生效。只有相邻的元素（例如网格单元格）不应受Stack的影响。然而，网格单元可能是Stacks ，并且网格本身是Stack的成员。

The potential remit of the Stack layout can hardly be overestimated. Anywhere elements are stacked one atop another, it is likely a Stack should be in effect. Only adjacent elements (such as grid cells) should not be subject to a Stack. The grid cells are likely to be Stacks, however, and the grid itself a member of a Stack.

发电机

The generator

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释：

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments:

.stack {
  /* ↓ The flex context */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  /* ↓ Any extant vertical margins are removed */
  margin-block: 0;
} 

.stack > * + * {
  /* ↓ Top margin is only applied to successive elements */
  margin-block-start: var(--space, 1.5rem;);
}

<div class="stack">
  <div><!-- child --></div>
  <div><!-- child --></div>
  <div><!-- etc --></div>
</div>

组件

The component

Stack 的自定义元素实现可供下载。

A custom element implementation of the Stack is available for download.

<stack-l>
  <h2><!-- some text --></h2>
  <img src="path/to/some/image.svg" />
  <p><!-- more text --></p>
</stack-l>

<stack-l space="3rem">
  <h2><!-- heading label --></h2>
  <stack-l space="1.5rem">
    <p><!-- body text --></p>
    <p><!-- body text --></p>
    <p><!-- body text --></p>
  </stack-l>
  <h2><!-- heading label --></h2>
  <stack-l space="1.5rem">
    <p><!-- body text --></p>
    <p><!-- body text --></p>
    <p><!-- body text --></p>
  </stack-l>
</stack-l>

<stack-l recursive>
  <div><!-- first level child --></div>
  <div><!-- first level sibling --></div>
  <div>
    <div><!-- second level child --></div>
    <div><!-- second level sibling --></div>
  </div>
</stack-l>

<stack-l role="list">
  <div role="listitem"><!-- item 1 content --></div>
  <div role="listitem"><!-- item 2 content --></div>
  <div role="listitem"><!-- item 3 content --></div>
</stack-l>

问题

The problem

正如我在Boxes中建立的那样，每个呈现的元素都会创建一个盒子形状。那么一个Box布局，封装成一个专用的Box组件有什么用呢？

As I established in Boxes, every rendered element creates a box shape. So what is the use of a Box layout, encapsulated as a dedicated Box component?

所有随后的布局都涉及将盒子排列在一起；以某种方式分布它们，使它们形成一个复合的视觉结构。例如，简单的Stack布局采用多个框并在它们之间插入垂直边距。

All the ensuing layouts deal in arranging boxes together; distributing them in some way such that they form a composite visual structure. For example, the simple Stack layout takes a number of boxes and inserts vertical margin between them.

重要的是Stack除了插入垂直边距外没有其他目的。如果它开始承担其他职责，它的工作描述将变得毫无意义，系统中的其他布局原语将不知道如何围绕Stack行事。

It is important the Stack is given no other purpose than to insert vertical margins. If it started to take on other responsibilities, its job description would become a nonsense, and the other layout primitives within the system wouldn't know how to behave around the Stack.

换句话说，这是一个关注点分离的问题。就像在计算机科学中一样，在视觉设计中，为每个工作部分赋予专门且独特的职责对您的系统有益。设计通过组合出现。

In other words, it's a question of separating concerns. Just as in computer science, in visual design it benefits your system to give each working part a dedicated and unique responsibility. The design emerges through composition.

Box在这个布局系统中的作用是处理任何可以被认为是单个元素固有的样式；不是从单个元素可能服从的元布局中规定、继承或推断的样式。但是这些是什么风格呢？感觉他们可以数不胜数。

The Box's role within this layout system is to take care of any styles that can be considered intrinsic to individual elements; styles which are not dictated, inherited, or inferred from the meta-layouts to which an individual element may be subjected. But which styles are these? It feels like they could be innumerable.

不必要。虽然某些 CSS 方法使您能够（或痛苦，取决于您的观点）将任何样式应用于单个元素，但有很多样式不需要以这种零碎的方式编写。font-family、color和等样式line-height都可以继承或以其他方式全局应用，如全局和局部样式中所述。他们应该这样做，因为根据具体情况设置这些样式是多余的。

Not necessarily. While some approaches to CSS give you the power (or the pain, depending on your perspective) to apply any and every style to an individual element, there are plenty of styles that do not need to be written in this piecemeal way. Styles like font-family, color, and line-height can all be inherited or otherwise applied globally, as set out in Global and local styling. And they should, because setting these styles on a case-by-case basis is redundant.

:root {
  font-family: sans-serif;
}

.box {
  /* ↓ Not needed because the style is inherited */
  /* font-family: sans-serif; */
}

当然，您可能会在设计中使用多个font-family。但是应用默认（或“基本”）样式并在以后创建例外比将所有样式都设置为特殊情况更有效。

Of course, you are likely to employ more than one font-family in your design. But it is more efficient to apply default (or 'base') styles and later make exceptions than to style everything like it is a special case.

方便的是，全局样式往往是与品牌相关的样式——影响美学但不影响主题元素比例的样式。这个项目的目的是专门探索布局系统的创建，我们对品牌（或美学）本身不感兴趣。我们正在构建动态的、响应迅速的线框。美学可以应用在上面。

Conveniently, global styles tend to be branding related styles — styles that affect the aesthetics but not the proportions of the subject element(s). The purpose of this project is to explore the creation of a layout system specifically, and we are not interested in branding (or aesthetics) as such. We are building dynamic, responsive wireframes. Aesthetics can be applied on top.

这限制了我们必须选择的属性数量。为了进一步减少这组潜在属性，我们必须问自己哪些特定于布局的属性最好由简单Box的父元素或祖先元素处理。

This limits the number of properties we have to choose from. To reduce this set of potential properties further, we have to ask ourselves which layout-specific properties are better handled by parent or ancestor elements of the simple Box.

解决方案

The solution

边距适用于Box，但仅由上下文引起——正如我已经确定的那样。宽度和高度也应该通过外部值（例如由 、 和 共同计算的宽度flex-basis）flex-grow或flex-shrinkBox 中内容的性质来推断。

Margin is applicable to the Box, but only as induced by context — as I've already established. Width and height should also be inferred, either by an extrinsic value (such as the width calculated by flex-basis, flex-grow, and flex-shrink working together) or by the nature of the content held inside the Box.

可以这样想：如果你没有任何东西可以放在盒子里，你就不需要盒子。如果你确实有东西要放在盒子里，最好的盒子是空间刚好够用的盒子。

Think of it like this: If you don't have anything to put in a box, you don't need a box. If you do have something to put in a box, the best box is one with just enough room and no more.

.box {
  padding: var(--s1);
}

.box {
  padding: var(--s1);
}

.box * {
  color: inherit;
}

.box {
  --color-light: #eee;
  --color-dark: #222;
  color: var(--color-dark);
  background-color: var(--color-light);
  padding: var(--s1);
}

.box * {
  color: inherit;
}

.box.invert {
  /* ↓ Dark becomes light, and light becomes dark */
  color: var(--color-light);
  background-color: var(--color-dark);
}

在没有边框的情况下，abackground-color不足以描述盒子形状。这是因为高对比度主题往往会消除背景。然而，通过使用透明outline的盒子形状可以恢复。

In the absence of a border, a background-color is insufficient for describing a box shape. This is because high contrast themes tend to eliminate backgrounds. However, by employing a transparent outline the box shape can be restored.

.box {
  --color-light: #eee;
  --color-dark: #222;
  color: var(--color-dark);
  background-color: var(--color-light);
  padding: var(--s1);
  outline: 0.125rem solid transparent;
  outline-offset: -0.125rem;
}

这是如何运作的？当高对比度主题未运行时，轮廓是不可见的。该outline属性对布局也没有影响（如果存在，它会从元素中长出以覆盖其他元素）。当打开 Windows 高对比度模式时，它会为轮廓赋予颜色并绘制方框。

How does this work? When a high contrast theme is not running, the outline is invisible. The outline property also has no impact on layout (it grows out from the element to cover other elements if present). When Windows High Contrast Mode is switched on, it gives the outline a color and the box is drawn.

负值outline-offset将轮廓移动到Box的周边内，因此它的行为类似于边框，不再增加框的整体尺寸。

The negative outline-offset moves the outline inside the Box's perimeter so it behaves like a border and no longer increases the box's overall size.

用例

Use cases

Box的基本且多产的用例是对某些内容进行分组和划分。此内容可能显示为消息或“注释”等文本流内容，显示为网格中的一张卡片，或显示为已定位对话框元素的内部包装。

The basic, and highly prolific, use case for a Box is to group and demarcate some content. This content may appear as a message or 'note' among other, textual flow content, as one card in a grid of many, or as the inner wrapper of a positioned dialog element.

您也可以只组合盒子来制作一些有用的作品。带有 'header' 元素的Box可以由两个嵌套在另一个父Box中的兄弟框组成。

You can also combine just boxes to make some useful compositions. A Box with a 'header' element can be made from two sibling boxes, nested inside another, parent Box.

发电机

The generator

使用此工具生成基本的Box CSS 和 HTML。它提供了创建基本的双色调框的能力，包括亮暗和暗亮（“反转”）主题。有关更多信息，请参阅可见框部分。

Use this tool to generate basic Box CSS and HTML. It provides the ability to create basic, two-tone boxes, including light-on-dark and dark-on-light ('inverted') themes. See the The visible box section for more.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释：

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments:

.box {
  /* ↓ Padding set to the first point on the modular scale */
  padding: var(--s1);
  /* ↓ Assumes you have a --border-thin var */
  border: var(--border-thin) solid;
  /* ↓ Always apply the transparent outline, for high contrast mode */
  outline: var(--border-thin) transparent;
  outline-offset: calc(var(--border-thin) * -1);
  /* ↓ The light and dark color vars */
  --color-light: #fff;
  --color-dark: #000;
  color: var(--color-dark);
  background-color: var(--color-light);
}

.box * {
  /* ↓ Force colors to inherit from the parent
  and honor inversion (below) */
  color: inherit;
}

.box.invert {
  /* ↓ The color vars inverted */
  color: var(--color-light);
  background-color: var(--color-dark);
}

<div class="box">
  <-- the box's contents -->
</div>

组件

The component

Box 的自定义元素实现可供下载。

A custom element implementation of the Box is available for download.

<box-l>
  <!-- contents of the box -->
</box-l>

<stack-l>
  <p>...</p>
  <blockquote>...</blockquote>
  <box-l>
    <!-- Box separated by vertical margins -->
  </box-l>
  <p>...</p>
  <div role="figure">...</div>
</stack-l>

<box-l padding="0">
  <box-l borderWidth="0" invert>head</box-l>
  <box-l borderWidth="0">body</box-l>
</box-l>

问题

The problem

在 HTML 的早期，有许多表现元素；元素的设计纯粹是为了影响其内容的外观。这<center>是一个这样的元素，但长期以来一直被认为是过时的。奇怪的是，一些浏览器仍然支持它，包括谷歌的 Chrome。这大概是因为谷歌的搜索主页仍然使用 a<center>来居中对齐其著名的搜索输入。

In the early days of HTML, there were a number of presentational elements; elements devised purely to affect the appearance of their content. The <center> was one such element, but has long since been considered obsolete. Curiously, it is still supported in some browsers, including Google's Chrome. Presumably this is because Google's search homepage still uses a <center> to center-justify its famous search input.

撇开科技巨头异想天开地使用废弃元素不谈，我们在 2000 年代基本上不再使用展示性标记。通过将样式设置为一项单独的技术（CSS）的责任，我们能够分别管理样式和结构。因此，艺术方向的改变将不再意味着重构我们的内容。

Tech' giants' whimsical usage of defunct elements aside, we mostly moved away from using presentational markup in the 2000s. By making styling the responsibility of a separate technology—CSS—we were able to manage style and structure separately. Consequently, a change in art direction would no longer mean reconstituting our content.

后来我们发现，纯粹根据语义和上下文来设计 HTML 样式是相当有野心的，并导致了一些笨拙的选择器，比如

We later discovered that styling HTML purely in terms of semantics and context was rather ambitious, and led to some unwieldy selectors like

body > div > div > a {
  /* 
  Link styles specifically for links 
  nested two <div>s inside the body element 
  */
}

为了更容易维护 CSS 和样式模块化，我们中的许多人采用了使用类的折衷方案。因为类可以放在任何元素上，所以我们可以自由地设置样式，例如，以完全相同的方式<div>识别非语义或屏幕阅读器，使用相同的标记，但不会影响可访问性。<nav>

For the sake of easier CSS maintenance and style modularity many of us adopted a compromise position using classes. Because classes can be placed on any element, we are free to style, say, a non-semantic <div> or a screen reader recognized <nav> in exactly the same way, using the same token, but without compromising on accessibility.

<div class="text-align:center"></div>

<nav class="text-align:center"></nav>

<center>所做的一切都是text-align: center居中对齐的文本。对于大多数内容——尤其是包含段落文本的内容——你会想要避免它。可读性很差。

All <center> did, and all text-align: center does, is center-justify text. And for most content—especially content that includes paragraph text—you'll want to avoid it. It's terrible for readability.

但是有用的是可以创建水平居中列的组件。使用这样的组件，我们可以在任何容器内创建一个居中的“条带”内容，限制其宽度以保持合理的尺寸。

But what would be useful is a component that can create a horizontally centered column. With such a component, we could create a centered 'stripe' of content within any container, capping its width to preserve a reasonable measure.

解决方案

The solution

解决居中列的最简单方法之一是使用auto边距。关键字，auto顾名思义，指示浏览器为您计算保证金。它可能是算法CSS 技术最基本的示例之一：它遵循浏览器的逻辑来确定布局，而不是“硬编码”特定值。

One of the easiest ways to solve for a centered column is to use auto margins. The auto keyword, as its name suggests, instructs the browser to calculate the margin for you. It's perhaps one of the most rudimentary examples of an algorithmic CSS technique: one that defers to the browser's logic to determine the layout rather than 'hard coding' a specific value.

我的第一个居中列将使用margin速记，通常在<body>元素上。

My first centered columns would use the margin shorthand, often on the <body> element.

.center {
  max-width: 60ch;
  margin: 0 auto;
}

速记属性的问题——尽管它节省了几个字节——是你必须声明某些值，即使它们不适用。仅设置实现您尝试的特定布局所需的 CSS 值非常重要。您永远不知道您可能正在撤销哪些推断或继承的值。

The trouble with the shorthand property—though it saves a few bytes—is that you have to declare certain values, even when they are not applicable. It's important to only set the CSS values needed to achieve the specific layout you are attempting. You never know what inferred or inherited values you might be undoing.

例如，我可能想将我的<center-l>自定义元素放在Stack上下文中。Stack sets margin-topon its children，任何<center-l>withmargin: 0 auto都会撤消它。

For example, I might want to place my <center-l> custom element within a Stack context. Stack sets margin-top on its children, and any <center-l> with margin: 0 auto would undo that.

相反，我可以使用显式margin-left和margin-right属性。然后，将保留上下文应用的任何垂直边距，并且该<center-l>组件将准备好在其他布局组件中进行组合/嵌套。

Instead, I could use the explicit margin-left and margin-right properties. Then, any vertical margins contextually applied would be preserved, and the <center-l> component would be primed for composition/nesting among other layout components.

.center {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

更好的是，我可以使用单个margin-inline 逻辑属性。如Boxes中所述，逻辑属性与方向和维度映射有关，因此与更广泛的语言兼容。我们也在使用max-inline-size代替max-width.

Even better, I could use a single margin-inline logical property. As described in Boxes, logical properties pertain to direction and dimension mappings and are—as such—compatible with a wider range of languages. We are also using max-inline-size in place of max-width.

.center {
  max-inline-size: 60ch;
  margin-inline: auto;
}

.center {
  box-sizing: content-box;
  max-inline-size: 60ch;
  margin-inline: auto;
  padding-inline-start: var(--s1);
  padding-inline-end: var(--s1);
}

.center {
  box-sizing: content-box;
  max-inline-size: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

用例

Use cases

每当您希望某些东西水平居中时，中心就是您的朋友。在下面的示例中，我模拟了Every Layout文档站点的基本布局（您现在可能正在查看，除非您正在阅读 EPUB）。它包含一个Sidebar ，右侧有一个Center 。使用Stacks在侧边栏和中心垂直分隔元素。应用了布尔值的嵌套中心将“启动演示”按钮居中。intrinsic

Whenever you wish something to be horizontally centered, the Center is your friend. In the following example, I am emulating the basic layout for the Every Layout documentation site (which you may be looking at now, unless you’re reading the EPUB). It comprises a Sidebar, with a Center to the right-hand side. Elements are vertically separated in both the sidebar and the Center using Stacks. A nested Center with the intrinsic boolean applied centers the 'Launch demo' button.

（您可能需要在其自己的（桌面）窗口中启动它以查看居中操作。）

(You may need to launch it in its own (desktop) window to see the centering in action.)

发电机

The Generator

使用此工具生成基本的Center CSS 和 HTML。

Use this tool to generate basic Center CSS and HTML.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释（省略了固有的居中代码）：

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments (omitting the intrinsic centering code):

.center {
  /* ↓ Remove padding from the width calculation */
  box-sizing: content-box;
  /* ↓ The maximum width is the maximum measure */
  max-inline-size: 60ch;
  /* ↓ Only affect horizontal margins */
  margin-inline: auto;
  /* ↓ Apply the minimum horizontal space */
  padding-inline-start: var(--s1);
  padding-inline-end: var(--s1);
}

<div class="center">
  <!-- centered content -->
</div>

组件

The Component

该中心的自定义元素实现可供下载。

A custom element implementation of the Center is available for download.

<box-l>
  <center-l>
    <stack-l>
      <!-- Any flow content here (headings, paragraphs, etc) -->
    </stack-l>
  <center-l>
</box-l>

<sidebar-l contentMin="66.666%" sideWidth="10rem">
  <stack-l role="navigation">
    <!-- navigation items (API refs) -->
  </stack-l>
  <div>
    <center-l role="main">
      <!-- main content for the page -->
    </center-l>
  </div>
</sidebar-l>

<cover-l centered="center-l">
  <center-l intrinsic>
    <p>I am in the absolute center.</p>
  </center-l>
</cover-l>

问题

The problem

有时网格是布局内容的合适框架，因为您希望内容严格对齐作为行和列边界的水平线和垂直线。

Sometimes grids are an appropriate framework for laying out content, because you want that content to align strictly to the horizontal and vertical lines that are those row and column boundaries.

但并不是所有事情都受益于这种规定的严格性——至少不是在所有情况下。文本本身不能遵守网格的限制，因为单词有不同的形状和长度。相反，浏览器的文本换行算法会分配文本以尽可能地填充可用空间。左对齐的文本有一个“参差不齐”的右边缘，因为每一行都不可避免地具有不同的长度。

But not everything benefits from this prescribed rigidity — at least not in all circumstances. Text itself cannot adhere to the strictures of a grid, because words come in different shapes and lengths. Instead, the browser's text wrapping algorithm distributes the text to fill the available space as best it can. Left-aligned text has a 'ragged' right edge, because each line will inevitably be of a different length.

多亏了前导 ( line-height) 和单词空间（U+0020字符，或者SPACE你的按键），单词可以合理均匀地间隔，尽管它们的形式多种多样。当我们处理不确定大小/形状的元素组时，我们应该经常希望它们以类似的流动方式分布。

Thanks to leading (line-height) and word spaces (the U+0020 character, or a SPACE keypress to you), words can be reasonably evenly spaced, despite their diversity of form. Where we am dealing with groups of elements of an indeterminate size/shape, we should often like them to distribute in a similarly fluid way.

一种方法是将这些元素的display值设置为inline-block。这使您可以控制padding并margin同时保留固有大小。也就是说，inline-block元素的大小仍然根据其内容的维度来确定。

One approach is to set these elements' display value to inline-block. This gives you some control over padding and margin while retaining intrinsic sizing. That is, inline-block elements are still sized according to the dimensions of their content.

但是，与单词一样，inline-block元素仍然由空格字符分隔（在源代码中存在）。此空间的宽度将添加到margin您申请的任何内容。可以删除此空格，但只能通过font-size: 0在父项上设置并重置子项的值来删除。

However, like words, inline-block elements are still separated by space characters (where present in the source). The width of this space will be added to any margin you apply. This space can be removed, but only by setting font-size: 0 on the parent, and resetting the value on the children.

.parent {
  font-size: 0;
}

.parent > * {
  font-size: 1rem;
}

这样做的缺点是我们不能em在我的子元素上使用，因为它等于0。相反，我们需要用单位设置元素的font-size相对值。必须以这种方式重置字体大小有些限制。:rootrem

This has the disadvantage that we can't use em on my child elements because it would be equal to 0. Instead, we need to set the font-size relative to the :root element with the rem unit. Font size having to be reset in this fashion is somewhat restrictive.

即使消除了空间，仍然存在与包装相关的边距问题。如果将边距应用于连续元素，则在没有换行的情况下外观是可以接受的。但是在确实发生换行的地方，对齐的一侧出现了意想不到的缩进，并且垂直间距完全消失了。

Even with the space eliminated, there are still wrapping-related margin issues. If margin is applied to successive elements, the appearance is acceptable where no wrapping occurs. But where wrapping does occur, there are unexpected indents against the aligned side, and vertical spacing is missing entirely.

通过在每个元素上放置右边距和底部边距，可以进行部分修复。

A partial fix is possible by placing right and bottom margins on each element.

然而，这只解决了左对齐的情况——加上在多余的边距与父元素的填充交互时会出现双倍空间：

However, this only solves the left-aligned case — plus doubled-up space occurs where excess margin interacts with the padding of a parent element:

解决方案

The solution

要创建高效且易于管理的设计系统，我们需要为布局问题设计稳健的通用解决方案。

To create an efficient and manageable design system, we need to devise robust, general solutions to our layout problems.

首先，我们让父级成为 Flexbox 上下文。这允许我们将元素配置成簇，而不必处理不需要的单词空间。与使用浮动相比，它还有几个优点：我们不需要为浮动提供明确的修复，并且垂直对齐（使用align-items）是可能的。

First, we make the parent a Flexbox context. This allows us to configure the elements into clusters, without having to deal with undesirable word spaces. It also has several advantages over using floats: we do not need to provide a clear fix for one, and vertical alignment (using align-items) is possible.

.cluster {
  display: flex;
  flex-wrap: wrap;
}

.cluster {
  --space: 1rem;
}

.cluster > * {
  display: flex;
  flex-wrap: wrap;
  /* ↓ multiply by -1 to negate the halved value */
  margin: calc(var(--space) / 2 * -1);
}

.cluster > * > * {
  /* ↓ half the value, because of the 'doubling up' */
  margin: calc(var(--space) / 2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
}

/* This won’t work */
.cluster > * {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem;
}

@supports (gap: 1rem) {
  .cluster > * {
    margin: 0;
  }

  .cluster {
    gap: var(--space, 1rem);
  }  
}

用例

Use cases

簇组件适用于任何长度不同且易于缠绕的元素组。一起出现在表单末尾的按钮是理想的候选者，标签列表、关键字或其他元信息也是如此。使用Cluster将任何水平布局的元素组向左或向右或居中对齐。

Cluster components suit any groups of elements that differ in length and are liable to wrap. Buttons that appear together at the end of forms are ideal candidates, as well as lists of tags, keywords, or other meta information. Use the Cluster to align any groups of horizontally laid out elements to the left or right, or in the center.

通过应用justify-content: space-between，align-items: center您甚至可以设置页面标题的徽标和导航。这将自然换行，不需要@media断点：

By applying justify-content: space-between and align-items: center you can even set out your page header’s logo and navigation. This will wrap naturally, and without the need for an @media breakpoint:

下面是上述标题布局的演示，使用嵌套的Cluster结构。外部Cluster使用justify-content: space-betweenand align-items: center。导航链接的Cluster用于justify-content: flex-start在包装后将其项目左对齐。

Below is a demo of the aforementioned header layout, using a nested Cluster structure. The outer Cluster uses justify-content: space-between and align-items: center. The Cluster for the navigation links uses justify-content: flex-start to align its items to the left after wrapping.

发电机

The generator

使用此工具生成基本的Cluster CSS 和 HTML。

Use this tool to generate basic Cluster CSS and HTML.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释：

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments:

.cluster {
  /* ↓ Set the Flexbox context */
  display: flex;
  /* ↓ Enable wrapping */
  flex-wrap: wrap;
  /* ↓ Set the space/gap */
  gap: var(--space, 1rem);
  /* ↓ Choose your justification (flex-start is default) */
  justify-content: center;
  /* ↓ Choose your alignment (flex-start is default) */
  align-items: center;
}

<ul class="cluster">
  <li><!-- child --></li>
  <li><!-- child --></li>
  <li><!-- etc --></li>
</ul>

组件

The component

集群的自定义元素实现可供下载。

A custom element implementation of the Cluster is available for download.

<cluster-l>
  <!-- child element here -->
  <!-- another child element -->
  <!-- etc -->
  <!-- etc -->
  <!-- etc -->
  <!-- etc -->
</cluster-l>

<cluster-l role="list">
  <div role="listitem"><!-- content of first list item --></div>
  <div role="listitem"><!-- content of second list item --></div>
  <div role="listitem"><!-- etc --></div>
  <div role="listitem"><!-- etc --></div>
</cluster-l>

问题

The problem

当你的视觉设计的媒介尺寸和设置不确定时，即使是像把东西放在其他东西旁边这样简单的东西也是一个难题。水平空间是否足够？而且，即使有，布局是否会充分利用垂直空间？

When the dimensions and settings of the medium for your visual design are indeterminate, even something simple like putting things next to other things is a quandary. Will there be enough horizontal space? And, even if there is, will the layout make the most of the vertical space?

如果两个相邻项目没有足够的空间，我们倾向于使用断点（基于宽度的@media查询）来重新配置布局，并将两个项目一个放在另一个之上。

Where there’s not enough space for two adjacent items, we tend to employ a breakpoint (a width-based @media query) to reconfigure the layout, and place the two items one atop the other.

重要的是我们使用内容而不是基于设备的@media查询。也就是说，我们应该在内容需要重新配置的任何地方进行干预，而不是坚持像720px和这样的任意宽度1024px。设备的大量增加意味着没有一套真正的标准尺寸可供设计。

It’s important we use content rather than device based @media queries. That is, we should intervene anywhere the content needs reconfiguration, rather than adhering to arbitrary widths like 720px and 1024px. The massive proliferation of devices means there’s no real set of standard dimensions to design for.

但即使是这种策略也有一个根本性的缺点：@media对宽度的查询与视口宽度有关，与实际可用空间无关。组件可能出现在300px宽容器中，也可能出现在更宽敞的宽容500px器中。但是视口的宽度在这两种情况下都是相同的，所以没有什么可以“响应”的。

But even this strategy has a fundamental shortcoming: @media queries for width pertain to the viewport width, and have no bearing on the actual available space. A component might appear within a 300px wide container, or it might appear within a more generous 500px wide container. But the width of the viewport is the same in either case, so there’s nothing to “respond” to.

设计系统倾向于对可能出现在不同上下文和空间之间的组件进行分类，因此这是一个真正的问题。只有使用像有争议的容器查询这样的功能，我们才能教会我们的组件布局完全了解上下文。

Design systems tend to catalogue components that can appear between different contexts and spaces, so this is a real problem. Only with a capability like the mooted container queries might we teach our component layouts to be fully context aware.

在某些方面，CSS Flexbox 模块及其提供的flex-basis，已经可以根据上下文很好地管理自己的布局。考虑以下代码：

In some respects, the CSS Flexbox module, with its provision of flex-basis, can already govern its own layout, per context, rather well. Consider the following code:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30ch;
}

该flex-basis值实质上确定了主题子元素的理想目标宽度。启用增长、收缩和环绕后，可用空间将被用完，这样每个元素都尽可能接近宽度30ch。在一个> 90ch宽容器中，每行可能出现三个以上的孩子。Between60ch和90ch只能出现两个项目，其中一个项目占据最后一行的全部（如果总数为奇数）。

The flex-basis value essentially determines an ideal target width for the subject child elements. With growing, shrinking, and wrapping enabled, the available space is used up such that each element is as close to 30ch wide as possible. In a > 90ch wide container, more than three children may appear per row. Between 60ch and 90ch only two items can appear, with one item taking up the whole of the final row (if the total number is odd).

通过设计理想的元素尺寸并容忍合理的差异，您基本上可以消除@media断点。您的组件本质上处理自己的布局，无需手动干预。我们介绍的许多布局都精巧地运用了这一基本机制，让您可以更精确地控制放置和环绕。

By designing to ideal element dimensions, and tolerating reasonable variance, you can essentially do away with @media breakpoints. Your component handles its own layout, intrinsically, and without the need for manual intervention. Many of the layouts we’re covering finesse this basic mechanism to give you more precise control over placement and wrapping.

例如，我们可能想要创建一个经典的侧边栏布局，其中两个相邻元素之一具有固定宽度，而另一个（如果您愿意的话，主要元素）占据剩余的可用空间。这应该是响应式的，没有@media断点，我们应该能够设置一个基于容器的断点来将元素包装成垂直配置。

For instance, we might want to create a classic sidebar layout, wherein one of two adjacent elements has a fixed width, and the other—the principle element, if you will—takes up the rest of the available space. This should be responsive, without @media breakpoints, and we should be able to set a container based breakpoint for wrapping the elements into a vertical configuration.

解决方案

The solution

侧边栏布局以构成小型侧边栏的元素命名：两个相邻元素中较窄的一个。它是一种量子布局，同时存在于两种配置之一——水平和垂直——如下图所示。采用哪种配置在构思时是未知的，并且完全取决于将其放置在父容器中时提供的空间。

The Sidebar layout is named for the element that forms the diminutive sidebar: the narrower of two adjacent elements. It is a quantum layout, existing simultaneously in one of the two configurations—horizontal and vertical—illustrated below. Which configuration is adopted is not known at the time of conception, and is dependent entirely on the space it is afforded when placed within a parent container.

在有足够空间的地方，这两个元素并排出现。至关重要的是，当两个元素相邻时，侧边栏的宽度是固定的，非侧边栏占据了剩余的可用空间。但是当两个元素环绕时，每个元素都会占用100%共享容器。

Where there is enough space, the two elements appear side-by-side. Critically, the sidebar’s width is fixed while the two elements are adjacent, and the non-sidebar takes up the rest of the available space. But when the two elements wrap, each takes up 100% of the shared container.

如何在某个点强制换行，我们很快就会谈到。首先，我们需要设置水平布局。

How to force wrapping at a certain point, we will come to shortly. First, we need to set up the horizontal layout.

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex-basis: 20rem;
  flex-grow: 1;
}

.not-sidebar {
  flex-basis: 0;
  flex-grow: 999;
}

这里要理解的关键是可用空间的作用。因为.not-sidebar元素的flex-grow值非常高 ( 999)，所以它占用了所有可用空间。元素的flex-basis值.sidebar不计入可用空间，而是从总空间中减去，因此出现类似侧边栏的布局。非侧边栏实质上将侧边栏压缩到理想宽度。

The key thing to understand here is the role of available space. Because the .not-sidebar element’s flex-grow value is so high (999), it takes up all the available space. The flex-basis value of the .sidebar element is not counted as available space and is subtracted from the total, hence the sidebar-like layout. The non-sidebar essentially squashes the sidebar down to its ideal width.

该.sidebar元素在技术上仍然允许增长，并且能够.not-sidebar在其下方包裹的地方这样做。为了控制换行发生的位置，我们可以使用min-inline-size，这相当于min-width默认的horizontal-tb书写模式。

The .sidebar element is still technically allowed to grow, and is able to do so where .not-sidebar wraps beneath it. To control where that wrapping happens, we can use min-inline-size, which is equivalent to min-width in the default horizontal-tb writing mode.

.not-sidebar {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

在.not-sidebar注定小于或等于50%容器宽度的地方，它被迫到一个新的行/行并增长以占用其所有空间。该值可以是任何值，但50%很合适，因为当侧边栏不再是两个元素中较窄的一个时，它就不再是侧边栏了。

Where .not-sidebar is destined to be less than or equal to 50% of the container’s width, it is forced onto a new line/row and grows to take up all of its space. The value can be anything, but 50% is apt since a sidebar ceases to be a sidebar when it is no longer the narrower of the two elements.

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sidebar {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 20rem;
  flex-grow: 1;
}

.not-sidebar {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 50%;
}

用例

Use cases

侧边栏适用于各种内容。无处不在的“媒体对象”（将媒体项目放置在描述旁边）是支柱，但它也可用于将按钮与表单输入对齐（按钮形成侧边栏并具有内在的、基于内容的宽度）。

The Sidebar is applicable to all sorts of content. The ubiquitous “media object” (the placing of an item of media next to a description) is a mainstay, but it can also be used to align buttons with form inputs (where the button forms the sidebar and has an intrinsic, content-based width).

以下示例使用定义为自定义元素的组件版本。

The following example uses the component version, defined as a custom element.

<form>
  <sidebar-l side="right" space="0" contentMin="66.666%">
    <input type="text">
    <button>Search</button>
  </sidebar-l>
</form>

发电机

The generator

使用此工具生成基本的边栏CSS 和 HTML。

Use this tool to generate basic Sidebar CSS and HTML.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释。假定非侧边栏是:last-child本例中的。

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments. It is assumed the non-sidebar is the :last-child in this example.

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  /* ↓ The default value is the first point on the modular scale */
  gap: var(--gutter, var(--s1));
}

.with-sidebar > :first-child {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 20rem;
  flex-grow: 1;
}

.with-sidebar > :last-child {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 50%;
}

<div class="with-sidebar">
  <div><!-- sidebar --></div>
  <div><!-- non-sidebar --></div>
</div>

组件

The component

Sidebar 的自定义元素实现可供下载。

A custom element implementation of the Sidebar is available for download.

<sidebar-l space="var(--s2)" sideWidth="15rem" noStretch>
  <img src="path/to/image" alt="Description of image" />
  <p><!-- the text accompanying the image --></p>
</sidebar-l>

<sidebar-l space="var(--s2)" side="right" sideWidth="30ch">
  <div>
    <image src="path/to/image" alt="Description of image">
  </div>
  <p><!-- the text accompanying the image --></p>
</sidebar-l>

二维对称性问题

Issues with two-dimensional symmetry

虽然这是一种可用的布局机制，但它只会生成两个布局，其中每个元素的宽度相同：

While this is a serviceable layout mechanism, it only produces two layouts wherein each element is the same width:

• 单列布局（给定最窄的容器）
• 常规的多列布局（每行的列数相等）

在其他情况下，元素的数量和可用空间共同构成如下布局：

In other cases, the number of elements and the available space conspire to make layouts like these:

这不一定是需要解决的问题，具体取决于简报。只要内容将自身配置为保留在空间中，不被遮挡，那么最重要的战斗就已经胜利了。但是，对于较少数量的主题元素，可能会出现您希望直接从水平（一行）布局切换到垂直（一列）布局并绕过中间状态的情况。

This is not necessarily a problem that needs to be solved, depending on the brief. So long as the content configures itself to remain in the space, unobscured, the most important battle has been won. However, for smaller numbers of subject elements, there may be cases where you wish to switch directly from a horizontal (one row) to a vertical (one column) layout and bypass the intermediary states.

任何已经包裹并成长为采用不同宽度的元素都可以被用户视为被“挑选出来”；故意看起来不同，或者更重要。我们应该避免这种混淆。

Any element that has wrapped and grown to adopt a different width could be perceived by the user as being “picked out”; made to deliberately look different, or more important. We should want to avoid this confusion.

解决方案

The solution

Switcher元素（基于奇怪命名的Flexbox Holy Albatross ）在给定的基于容器的断点处在水平和垂直布局之间切换 Flexbox 上下文。也就是说，如果断点是30rem，当父元素小于30remwide 时，布局将切换到垂直配置。

The Switcher element (based on the bizarrely named Flexbox Holy Albatross) switches a Flexbox context between a horizontal and a vertical layout at a given, container-based breakpoint. That is, if the breakpoint is 30rem, the layout will switch to a vertical configuration when the parent element is less than 30rem wide.

为了实现这种切换，首先要设置一个基本的水平布局，并flex-grow启用换行：

In order to achieve this switch, first a basic horizontal layout is instated, with wrapping and flex-grow enabled:

.switcher > * {
  display: flex;
  flex-wrap: wrap;
}

.switcher > * > * {
  flex-grow: 1;
}

该flex-basis值将容器的（当前）宽度（表示为100%）输入到具有指定30rem断点的计算中。

The flex-basis value enters the (current) width of the container, expressed as 100%, into a calculation with the designated 30rem breakpoint.

30rem - 100%

根据 的解析值100%，这将返回正值或负值：如果容器比 窄30rem，则返回正值；如果容器比 宽，则返回负值。然后将该数字乘以999产生一个非常大的正数或一个非常大的负数：

Depending on the parsed value of 100%, this will return either a positive or negative value: positive if the container is narrower than 30rem, or negative if it is wider. This number is then multiplied by 999 to produce either a very large positive number or a very large negative number:

(30rem - 100%) * 999

这是flex-basis原位声明：

Here is the flex-basis declaration in situ:

.switcher > * {
  display: flex;
  flex-wrap: wrap;
}

.switcher > * > * {
  flex-grow: 1;
  flex-basis: calc((30rem - 100%) * 999);
}

负值flex-basis无效，将被丢弃。由于 CSS 的弹性错误处理，这意味着仅flex-basis忽略该行，其余的 CSS 仍会应用。错误的负值flex-basis被更正为0——因为flex-grow存在——每个元素增长以占据相等比例的水平空间。

A negative flex-basis value is invalid, and dropped. Thanks to CSS’s resilient error handling this means just the flex-basis line is ignored, and the rest of the CSS is still applied. The erroneous negative flex-basis value is corrected to 0 and—because flex-grow is present—each element grows to take up an equal proportion of horizontal space.

另一方面，如果计算出的flex-basis值是一个很大的正数，则每个元素都会达到最大值以占据一整行。这导致垂直配置。中间配置被成功绕过。

If, on the other hand, the calculated flex-basis value is a large positive number, each element maxes out to take up a whole row. This results in the vertical configuration. Intermediary configurations are successfully bypassed.

.switcher {
  --threshold: 30rem;
  --space: 1rem;
}

.switcher > * {
  display: flex;
  flex-wrap: wrap;
  /* ↓ Multiply by -1 to make negative */
  margin: calc(var(--space) / 2 * -1);
}

.switcher > * > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - (100% - var(--space))) * 999);
  /* ↓ Half the value to each element, combining to make the whole */
  margin: calc(var(--space) / 2);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  --threshold: 30rem;
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

用例

Use cases

在许多情况下，您可能希望直接在水平和垂直布局之间切换。但它在每个元素都应被视为相等或连续体的一部分时特别有用。无论方向如何，广告产品的卡片组件都应共享相同的宽度，否则一张或多张卡片可能会以某种方式被视为突出显示或特色。

There are any number of situations in which you might want to switch directly between a horizontal and vertical layout. But it is especially useful where each element should be considered equal, or part of a continuum. Card components advertising products should share the same width no matter the orientation, otherwise one or more cards could be perceived as highlighted or featured in some way.

如果这些步骤沿着一条水平线或垂直线布置，则一组编号的步骤也更容易认知。

A set of numbered steps is also easier on cognition if those steps are laid out along one horizontal or vertical line.

发电机

The Generator

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释：

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments:

.switcher {
  display: flex;
  flex-wrap: wrap;
  /* ↓ The default value is the first point on the modular scale */
  gap: var(--gutter, var(--s1));
  /* ↓ The width at which the layout “breaks” */
  --threshold: 30rem;
}

.switcher > * {
  /* ↓ Allow children to grow */
  flex-grow: 1;
  /* ↓ Switch the layout at the --threshold */
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  /* ↓ Switch to a vertical configuration if
  there are more than 4 child elements */
  flex-basis: 100%;
}

<div class="switcher">
  <div><!-- child element --></div>
  <div><!-- another child element --></div>
  <div><!-- etc --></div>
</div>

组件

The Component

切换器的自定义元素实现可供下载。

A custom element implementation of the Switcher is available for download.

问题

The problem

多年来，人们对使用 CSS 水平和垂直居中有多么困难感到震惊。它被 CSS 的批评者用作其缺点的一种示范性“证明”。

For years, there was consternation about how hard it was to horizontally and vertically center something with CSS. It was used by detractors of CSS as a kind of exemplary “proof” of its shortcomings.

事实上，有很多方法可以让 CSS 内容居中。然而，只有这么多方法可以做到这一点，而不必担心溢出、重叠或其他类似的破损。例如，我们可以使用relative定位和 atransform来垂直居中父元素中的元素：

The truth is, there are numerous ways to center content with CSS. However, there are only so many ways you can do it without fear of overflows, overlaps, or other such breakages. For example, we could use relative positioning and a transform to vertically center an element within a parent:

.parent {
  /* ↓ Give the parent the height of the viewport */
  block-size: 100vh;
}

.parent > .child {
  position: relative;
  /* ↓ Push the element down 50% of the parent */
  inset-block-start: 50%;
  /* ↓ Then adjust it by 50% of its own height */
  transform: translateY(-50%);
}

这translateY(-50%)部分的巧妙之处在于，它补偿了元素本身的高度——无论该高度是多少。不足之处是当子元素的内容使其比父元素高时产生的顶部和底部溢出。到目前为止，我们还没有设计出可以容忍动态内容的布局。

What’s neat about this is the translateY(-50%) part, which compensates for the height of the element itself—no matter what that height is. What’s less than neat is the top and bottom overflow produced when the child element's content makes it taller than the parent. We have not, so far, designed the layout to tolerate dynamic content.

也许最稳健的方法是结合 Flexbox 的justify-content: center（水平）和align-items: center（垂直）。

Perhaps the most robust method is to combine Flexbox’s justify-content: center (horizontal) and align-items: center (vertical).

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

这在只有一个居中元素存在争议的情况下非常有用。但是我们习惯于在居中元素的上方和下方包含其他元素。也许它是右上角的关闭按钮，或者底部中心的“阅读更多”指示器。无论如何，我需要以模块化的方式处理这些情况，并且不会产生破损。

This is perfectly serviceable where only one centered element is in contention. But we have a habit of wanting to include other elements, above and below the centered one. Perhaps it's a close button in the top right, or a “read more” indicator in the bottom center. In any case, I need to handle these cases in a modular fashion, and without producing breakages.

解决方案

The solution

我需要的是一个布局组件，它可以处理垂直居中的内容（低于min-block-size阈值）并且可以容纳顶部/页眉和底部/页脚元素。为了使组件真正可组合，我应该能够在 HTML 中添加和删除这些元素，而不必同时调整 CSS。它应该是模块化的，因此不是对内容编辑器的编码强加。

What I need is a layout component that can handle vertically centered content (under a min-block-size threshold) and can accommodate top/header and bottom/footer elements. To make the component truly composable I should be able to add and remove these elements in the HTML without having to also adapt the CSS. It should be modular, and therefore not a coding imposition on content editors.

Cover组件是一个带有flex-direction: column. 此声明意味着子元素是垂直放置的，而不是水平放置的。换句话说，Flexbox 格式化上下文的“流向”返回到标准块元素的流向。

The Cover component is a Flexbox context with flex-direction: column. This declaration means child elements are laid out vertically rather than horizontally. In other words, the 'flow direction' of the Flexbox formatting context is returned to that of a standard block element.

.cover {
  display: flex;
  flex-direction: column;
}

封面有一个主要元素，它应该始终被吸引到中心。此外，它可以有一个顶部/页眉元素和/或一个底部/页脚元素。

The Cover has one principal element that should always gravitate towards the center. In addition, it can have one top/header element and/or one bottom/footer element.

我们如何在不调整 CSS 的情况下管理所有这些情况？首先，我们给居中元素（h1在示例中，但它可以是任何元素）提供auto边距。这可以在一个声明中使用margin-block：

How do we manage all these cases without having to adapt the CSS? First, we give the centered element (h1 in the example, but it can be any element) auto margins. This can be done in one declaration using margin-block:

.cover {
  display: flex;
  flex-direction: column;
}

.cover > h1 {
  margin-block: auto;
}

这些将元素推离它上面和下面的任何东西，将它移动到可用空间的中心。至关重要的是，它将推离父元素的内边缘或兄弟元素的顶部/底部边缘。

These push the element away from anything above and below it, moving it into the center of the available space. Critically, it will push off the inside edge of a parent or the top/bottom edge of a sibling element.

min-block-size剩下的就是确保在违反阈值的（最多）三个子元素之间有空间。

All that remains is to ensure there is space between the (up to) three child elements where the min-block-size threshold has been breached.

目前，auto利润率已经跌至零。由于我们无法输入调整边距auto的函数（无效），我们能做的最好的事情就是根据上下文添加到页眉和页脚元素。calc()calc(auto + 1rem)margin

Currently, the auto margins simply collapse down to nothing. Since we can’t enter auto into a calc() function to adapt the margin (calc(auto + 1rem) is invalid), the best we can do is to add margin to the header and footer elements contextually.

.cover > * {
  margin-block: 1rem;
}

.cover > h1 {
  margin-block: auto;
}

.cover > :first-child:not(h1) {
  margin-block-start: 0;
}

.cover > :last-child:not(h1) {
  margin-block-end: 0;
}

请注意，使用级联、特异性和否定来定位正确的元素。首先，我们使用通用子选择器将顶部和底部边距应用于所有子项。然后我们为要居中的 ( ) 元素覆盖它h1以实现auto边距。最后，仅当顶部和底部元素不是居中元素时，我们才使用该:not()函数从顶部和底部元素中删除无关的边距。如果有一个居中元素和一个页脚元素，但没有页眉元素，居中元素将是并且必须保留。:first-childmargin-block-start: auto

Note, the use of the cascade, specificity and negation to target the correct elements. First, we apply top and bottom margins to all the children, using a universal child selector. We then override this for the to-be-centered (h1) element to achieve the auto margins. Finally, we use the :not() function to remove extraneous margin from the top and bottom elements only if they are not the centered element. If there is a centered element and a footer element, but no header element, the centered element will be the :first-child and must retain margin-block-start: auto.

现在可以安全地在Cover容器内部使用padding. 无论存在一个、两个还是三个元素，间距现在都保持对称，并且我们的组件模块化而无需样式干预。

Now it is safe to add spacing around the inside of the Cover container using padding. Whether there are one, two or three elements present, spacing now remains symmetrical, and our component modular without styling intervention.

.cover {
  padding: 1rem;
  min-block-size: 100vh;
}

min-block-size设置为100vh，以便元素覆盖视口高度的 100%（因此得名）。但是，没有理由min-block-size不能将 设置为另一个值。100vh被认为是合理的 default ，并且是即将到来的自定义元素实现minHeight中prop的默认值。

The min-block-size is set to 100vh, so that the element covers 100% of the viewport's height (hence the name). However, there's no reason why the min-block-size cannot be set to another value. 100vh is considered a sensible default, and is the default value for the minHeight prop in the custom element implementation to come.

用例

Use cases

Cover的典型用途是为网页创建“首屏”介绍性内容。在下面的演示中，嵌套的Cluster元素用于布置徽标和导航菜单。在这种情况下，实用程序类 ( .text-align\:center) 用于水平居中 the<h1>和 footer 元素。

A typical use for the Cover would be to create the “above the fold” introductory content for a web page. In the following demo, a nested Cluster element is used to lay out the logo and navigation menu. In this case, a utility class (.text-align\:center) is used to horizontally center the <h1> and footer elements.

可能是您将页面的每个部分都视为一个Cover，并使用 Intersection Observer API 在封面进入视图时对其各个方面进行动画处理。下面提供了一个简单的实现（当data-visible元素进入视图时添加属性）。

It might be that you treat each section of the page as a Cover, and use the Intersection Observer API to animate aspects of the cover as it comes into view. A simple implementation is provided below (where the data-visible attribute is added as the element comes into view).

if ('IntersectionObserver' in window) {
  const targets = Array.from(document.querySelectorAll('cover-l'));
  targets.forEach(t => t.setAttribute('data-observe', ''));
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.setAttribute('data-visible', entry.isIntersecting);
    });
  };

  const observer = new IntersectionObserver(callback);
  targets.forEach(t => observer.observe(t));
}

发电机

The generator

使用此工具生成基本的Cover CSS 和 HTML。

Use this tool to generate basic Cover CSS and HTML.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释。它假定居中元素是<h1>, 在这种情况下，但它可以是任何元素。

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments. It assumes the centered element is an <h1>, in this case, but it could be any element.

.cover {
  --space: var(--s1);
  /* ↓ Establish a columnal flex context */
  display: flex;
  flex-direction: column;
  /* ↓ Set a minimum height to match the viewport height
  (any minimum would be fine) */
  min-block-size: 100vh;
  /* Set a padding value */
  padding: var(--space);
}

.cover > * {
  /* ↓ Give each child a top and bottom margin */
  margin-block: var(--s1);
}

.cover > :first-child:not(h1) {
  /* ↓ Remove the top margin from the first-child
  if it _doesn't_ match the centered element */
  margin-block-start: 0;
}

.cover > :last-child:not(h1) {
  /* ↓ Remove the bottom margin from the last-child
  if it _doesn't_ match the centered element */
  margin-block-end: 0;
}

.cover > h1 {
  /* ↓ Center the centered element (h1 here)
  in the available vertical space */
  margin-block: auto;
}

<div class="cover">
  <div><!-- first child --></div>
  <h1><!-- centered child --></h1>
  <div><!-- third child --></div>
</div>

组件

The component

Cover 的自定义元素实现可供下载。

A custom element implementation of the Cover is available for download.

<cover-l>
  <h1>Welcome!</h1>
</cover-l>

问题

The problem

设计师有时会谈论设计到网格。他们首先将网格（水平和垂直线的矩阵）放置到位，然后填充该空间，使文字和图片跨越那些相交线创建的框。

Designers sometimes talk about designing to a grid. They put the grid—a matrix of horizontal and vertical lines—in place first, then they populate that space, making the words and pictures span the boxes those intersecting lines create.

“网格优先”的布局方法只有在提前知道两件事的情况下才真正可行：

A 'grid first' approach to layout is only really tenable where two things are known ahead of time:

1. 空间
2. 内容

对于以纸质为目标的杂志布局，如Axioms中描述的布局，这些都是可以实现的。对于包含动态（阅读：可变）内容的屏幕和设备无关的 Web 布局，它们根本不是。

For a paper-destined magazine layout, like the one described in Axioms, these things are attainable. For a screen and device-independent web layout containing dynamic (read: changeable) content, they fundamentally are not.

CSS Grid 模块是激进的，因为它允许您将内容放置在预定义网格中的任何位置，因此将设计带到web 的网格中。但是网格内容的放置越是讲究和深思熟虑，就越@media需要以断点的形式进行手动调整，以适应不同的空间布局。网格定义本身、内容在其中的位置，或者两者都必须手动更改，并使用额外的代码。

The CSS Grid module is radical because it lets you place content anywhere within a predefined grid, and as such brings designing to a grid to the web. But the more particular and deliberate the placement of grid content, the more manual adjustment, in the form of @media breakpoints, is needed to adapt the layout to different spaces. Either the grid definition itself, the position of content within it, or both will have to be changed by hand, and with additional code.

正如我在The Switcher中介绍的那样，@media断点仅与视口尺寸有关，与父容器提供的即时可用空间无关。这意味着使用断点定义的布局组件@media基本上不是上下文独立的：这对于模块化设计系统来说是一个巨大的问题。

As I covered in The Switcher, @media breakpoints pertain to viewport dimensions only, and not the immediate available space offered by a parent container. That means layout components defined using @media breakpoints are fundamentally not context independent: a huge issue for a modular design system.

即使在理论上，也不可能以上下文无关、自动响应的方式设计网格。但是，可以创建基本的网格状结构：分为列和行的元素集。

It is not, even theoretically, possible to design to a grid in a context-independent, automatically responsive fashion. However, it's possible to create basic grid-like formations: sets of elements divided into both columns and rows.

妥协是不可避免的，所以这是一个寻找最典型但最有效的解决方案的问题。

Compromise is inevitable, so it's a question of finding the most archetypal yet efficient solution.

.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

.flex-grid > * {
  flex: 1 1 30ch;
}

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

解决方案

The solution

到目前为止，每个布局中描述的每个布局都只使用 CSS 处理了大小调整和包装，没有@media查询。有时不可能仅依靠 CSS 进行自动重新配置。在这些情况下，转向@media断点是不可能的，因为它破坏了布局系统的模块化。相反，我可能会遵从 JavaScript。但我应该明智地这样做，并使用渐进增强。

Each of the layouts described so far in Every Layout have handled sizing and wrapping with just CSS, and without @media queries. Sometimes it's not possible to rely on CSS alone for automatic reconfiguration. In these circumstances, turning to @media breakpoints is out of the question, because it undermines the modularity of the layout system. Instead, I might defer to JavaScript. But I should do so judiciously, and using progressive enhancement.

ResizeObserver（很快将在大多数现代浏览器中可用）是一个高度优化的 API，用于跟踪和响应元素维度的变化。这是迄今为止使用 JavaScript创建容器查询的最有效方法。我当然不建议使用它，但仅用于解决棘手的布局问题是可以接受的。

ResizeObserver (soon to be available in most modern browsers) is a highly optimized API for tracking and responding to changes in element dimensions. It is the most efficient method yet for creating container queries with JavaScript. I wouldn't recommend using it as a matter of course, but employed only for solving tricky layout issues is acceptable.

考虑以下代码：

Consider the following code:

.grid {
  display: grid;
  grid-gap: 1rem;
}

.grid.aboveMin {
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

该类aboveMin负责生成响应式网格的重写声明。ResizeObserver然后指示aboveMin根据容器宽度添加和删除类。500px（在上面的示例中）的最小值仅适用于容器本身比该阈值宽的情况。这是激活ResizeObserver网格元素上的独立函数。

The aboveMin class presides over an overriding declaration that produces the responsive grid. ResizeObserver is then instructed to add and remove the aboveMin class depending on the container width. The minimum value of 500px (in the above example) is only applied where the container itself is wider than that threshold. Here is a standalone function to activate the ResizeObserver on a grid element.

function observeGrid(gridNode) {
  // Feature detect ResizeObserver
  if ('ResizeObserver' in window) {
    // Get the min value from data-min="[min]"
    const min = gridNode.dataset.min;
    // Create a proxy element to measure and convert
    // the `min` value (which might be em, rem, etc) to `px`
    const test = document.createElement('div');
    test.style.width = min;
    gridNode.appendChild(test);
    const minToPixels = test.offsetWidth;
    gridNode.removeChild(test);

    const ro = new ResizeObserver(entries => {
      for (let entry of entries) {
        // Get the element's current dimensions
        const cr = entry.contentRect;
        // `true` if the container is wider than the minimum
        const isWide = cr.width > minToPixels;
        // toggle the class conditionally
        gridNode.classList.toggle('aboveMin', isWide);
      }
    });

    ro.observe(gridNode);
  }
}

如果ResizeObserver不支持，则永久应用后备单列布局。为了简洁起见，这里包含了这个基本的回退，但您可以转而回退到上一节中介绍的可用但不完美的 Flexbox 解决方案。在任何情况下，都不会丢失或遮挡任何内容，并且您可以使用更大的minmax()最小值来形成更具表现力的网格。由于我们不再受制于绝对限制，我们可以开始使用相对单位。

If ResizeObserver is not supported, the fallback one-column layout is applied perpetually. This basic fallback is included here for brevity, but you could instead fallback to the serviceable-but-imperfect Flexbox solution covered in the previous section. In any case, no content is lost or obscured, and you have the ability to use larger minmax() minimum values for more expressive grid formations. And since we're no longer bound to absolute limits, we can begin employing relative units.

这是一个示例初始化（为简洁起见省略了代码）：

Here's an example initialization (code is elided for brevity):

<div class="grid" data-min="250px">
  <!-- Place children here -->
</div>

<script>
  const grid = document.querySelector('.grid');
  observeGrid(grid);
</script>

.grid {
  display: grid;
  grid-gap: 1rem;
}

@supports (width: min(250px, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }
}

用例

Use cases

网格非常适合浏览永久链接或产品的预告片。我可以使用Box和Stack快速组成一个卡片组件来容纳我的每个预告片。

Grids are great for browsing teasers for permalinks or products. I can quickly compose a card component to house each of my teasers using a Box and a Stack.

发电机

The generator

使用此工具生成基本的网格CSS 和 HTML。

Use this tool to generate basic Grid CSS and HTML.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释：

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments:

.grid {
  /* ↓ Establish a grid context */
  display: grid;
  /* ↓ Set a gap between grid items  */
  grid-gap: 1rem;
  /* ↓ Set the minimum column width */
  --minimum: 20ch;
}

@supports (width: min(var(--minimum), 100%)) {
  .grid {
    /* ↓ Enhance with the min() function
    into multiple columns */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--minimum), 100%), 1fr));
  }
}

<div class="grid">
  <div><!-- child element --></div>
  <div><!-- another child element --></div>
  <div><!-- etc --></div>
</div>

组件

The component

网格的自定义元素实现可供下载。

A custom element implementation of the Grid is available for download.

<grid-l min="calc(var(--measure) / 3)">
  <box-l>
    <stack-l>
      <!-- card content -->
    </stack-l>
  </box-l>
  <box-l>
    <stack-l>
      <!-- card content -->
    </stack-l>
  </box-l>
  <box-l>
    <stack-l>
      <!-- card content -->
    </stack-l>
  </box-l>
  <box-l>
    <stack-l>
      <!-- card content -->
    </stack-l>
  </box-l>
  <!-- etc -->
</grid-l>

问题

The problem

有些事物以关系的形式存在。一条线作为两点之间的关系而存在；没有这两个点，就不能形成线。

Some things exist as relationships. A line exists as the relationship between two points; without both the points, the line cannot come into being.

说到画线，有些因素我们不一定知道，有些我们绝对知道。我们不一定知道在宇宙中每个点会出现在哪里。这可能不在我们的控制范围内。但我们确实知道，无论这些点出现在哪里，我们都能够在它们之间画一条直线。

When it comes to drawing lines, there are factors we don’t necessarily know, and others we absolutely do. We don’t necessarily know where, in the universe, each of the points will appear. That might be outside of our control. But we do know that, no matter where the points appear, we’ll be able to draw a straight line between them.

点的位置是可变的，但它们之间关系的性质是不变的。尽管存在变量，但利用存在的常量是我们塑造动态系统的方式。

The position of the points is variable, but the nature of their relationship is constant. Capitalizing on the constants that exist in spite of the variables is how we shape dynamic systems.

img {
  max-inline-size: 100%;
}

现在图像的宽度将匹配两个值之一：

Now the image’s width will match one of two values:

• 它自己的固有/自然宽度，基于文件数据
• 容器元素提供的水平空间的宽度

重要的是，无论哪种情况，高度都由纵横比决定。它与编写 相同block-size: auto，但现代兼容浏览器不需要显式声明。

Importantly, the height—in either case—is determined by the aspect ratio. It’s the same as writing block-size: auto, but that explicit declaration isn’t needed by modern, compliant browsers.

height == width / aspect ratio

有时我们想指定纵横比，而不是从图像文件中继承它。在不挤压或以其他方式扭曲图像的情况下实现此目的的唯一方法是动态重新裁剪图像。在图像上声明object-fit: cover将做到这一点：裁剪它以适应空间而不增加其自身的纵横比。容器成为未失真图像的窗口。

Sometimes we want to dictate the aspect ratio, rather than inheriting it from the image file. The only way to achieve this without squashing, or otherwise distorting, the image is to dynamically recrop it. Declaring object-fit: cover on an image will do just that: crop it to fit the space without augmenting its own aspect ratio. The container becomes a window onto the undistorted image.

可能有用的是一个通用的解决方案，我们可以根据给定的纵横比绘制一个矩形，并使其成为我们放置在其中的任何内容的窗口。

What might be useful is a general solution whereby we can draw a rectangle, based on a given aspect ratio, and make it a window onto any content we place within it.

解决方案

The solution

我们需要做的第一件事是找到一种方法来为任意元素指定纵横比，而无需对其宽度和高度进行硬编码。也就是说，我们需要让容器表现得像（替换的）图像。

The first thing we need to do is find a way to give an arbitrary element an aspect ratio without hard-coding its width and height. That is, we need to make a container behave like a (replaced) image.

为此，我们有aspect ratio 属性，它会取一个x/n值：

For that, we have the aspect ratio property that would take an x/n value:

.frame {
  aspect-ratio: 16 / 9;
}

在这个属性出现之前，我们不得不依赖于2009 年首次编写的内在比率技术。该技术利用了这样一个事实，即使在垂直维度上，填充也是相对于元素的宽度的。也就是说，padding-bottom: 56.25%将使一个空元素（没有设置高度）成为它宽度的十六分之九——纵横比为16:9. 您可以56.25%通过将9（表示高度）除以16（表示宽度）来找到 - 与找到纵横比本身相反的方法。

Before the advent of this property, we had to lean on an intrinsic ratio technique first written about as far back as 2009. The technique capitalizes on the fact that padding, even in the vertical dimension, is relative to the element’s width. That is, padding-bottom: 56.25% will make an empty element (with no set height) nine sixteenths as high as it is wide — an aspect ratio of 16:9. You find 56.25% by dividing 9 (representing the height) by 16 (representing the width) — the opposite way around to finding the aspect ratio itself.

使用自定义属性 和calc()，我们可以创建一个接口，它接受比率的左（分子，或n）和右（分母，或d）值的任何数字：

Using custom properties and calc(), we can create an interface that accepts any numbers for the left (numerator, or n) and right (denominator, or d) values of the ratio:

.frame {
  padding-bottom: calc(var(--n) / var(--d) * 100%);
}

假设class="frame"是块级元素（例如 a <div>），它的宽度将自动匹配其父元素的宽度。无论计算出的宽度值是多少，高度都是通过将其乘以 来确定的9 / 16。

Assuming class="frame" is a block level element (such as a <div>), its width will automatically match that of its parent. Whatever the calculated width value, the height is determined by multiplying it by 9 / 16.

由于支持现在对aspect-ratioproperty有利，我们可以继续使用它而不是这个精心设计的 hack。

Since support is now good for the aspect-ratio property, we can go ahead and use that instead of this elaborate hack.

.frame {
  aspect-ratio: 16 / 9;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

该object-fit属性不是为普通的、不可替换的元素设计的，所以我们必须包含更多的东西来处理它们。幸运的是，Flexbox 对齐和对齐也有类似的效果。由于 Flexbox 对替换元素没有影响，我们可以安全地将这些样式添加到父元素，同时overflow: hidden防止内容转义。

The object-fit property is not designed for normal, non-replaced elements, so we’ll have to include something more to handle them. Fortunately, Flexbox justification and alignment can have a similar effect. Since Flexbox has no affect on replaced elements, we can safely add these styles to the parent, with overflow: hidden preventing the content from escaping.

.frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

现在，任何简单元素都将放置在Frame的中心，并在比Frame本身高或宽的地方裁剪。如果元素的内容使它比父元素高，它会在顶部和底部被裁剪。由于内联内容换行，可能需要特定的设置宽度才能在左侧和右侧进行裁剪。为确保在所有上下文和所有缩放级别都发生裁剪，%基于 - 的值将起作用。

Now any simple element will be placed in the center of the Frame, and cropped where it is taller or wider than the Frame itself. If the element’s content makes it taller than the parent, it’ll be cropped at the top and the bottom. Since inline content wraps, a specific set width might be needed to cause cropping on the left and right. To make sure the cropping happens in all contexts, and at all zoom levels, a %-based value will work.

用例

Use cases

Frame主要用于将媒体（视频和图像）裁剪成所需的纵横比。一旦开始控制宽高比，您当然可以根据当前情况对其进行调整。例如，您可能希望根据视口方向为图像提供不同的纵横比。

The Frame is mostly useful for cropping media (videos and images) to a desired aspect ratio. Once you start controlling the aspect ratio, you can of course tailor it to the current circumstances. For example, you might want to give images a different aspect ratio depending on the viewport orientation.

可以通过方向@media查询更改自定义属性值来实现此目的。在下面的示例中，上一个示例的框架元素被制作成方形（而不是16:9横向），其中有相对更多的垂直空间可用。

It’s possible to achieve this by changing the custom property values via an orientation @media query. In the following example, the Frame elements of the previous example are made square (rather than 16:9 landscape) where there is relatively more vertical space available.

@media (orientation: portrait) {
  .frame {
    aspect-ratio: 1 / 1;
  }
}

Flexbox 规定意味着您可以将任何类型的 HTML 裁剪为给定的宽高比，包括<canvas>元素，如果这些是您选择的创建图像的方式。一组类似卡片的组件可能每个都包含一个图像，或者在没有图像的情况下包含一个文本回退：

The Flexbox provision means you can crop any kind of HTML to the given aspect ratio, including <canvas> elements if those are your chosen means of creating imagery. A set of card-like components might each contain either an image or—where none is available—a textual fallback:

发电机

The generator

使用此工具生成基本的框架CSS 和 HTML。

Use this tool to generate basic Frame CSS and HTML.

代码生成器工具仅在随附站点中可用。这是基本的解决方案，带有注释。

The code generator tool is only available in the accompanying site. Here is the basic solution, with comments.

.frame {
  --n: 16; /* numerator */
  --d: 9; /* denominator */
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

<div class="frame">
  <img src="/path/to/image" alt="description of the image here" />
</div>

组件

The component

框架的自定义元素实现可供下载。

A custom element implementation of the Frame is available for download.

<frame-l ratio="4:3">
  <img src="/path/to/image" alt="description of the image here" />
</frame-l>

问题

The problem

当我对音乐进行排序时，我不知道要创建的曲目要多长时间才能完成。当我添加声音条时，我的音序器软件知道这一点并按需提供时间。正如音乐音序器动态提供时间一样，网页提供空间。如果所有的歌曲都必须是四分二十六秒长，或者所有的网页768px都必须是高的，那么，那将是不必要的限制。

When I’m sequencing music, I don’t know how long the track I’m creating is going to be until I’m done. My sequencer software is aware of this and provisions time on demand, as I add bars of sound. Just as music sequencers dynamically provision time, web pages provision space. If all songs had to be four minutes and twenty six seconds long, or all web pages 768px high, well, that would be needlessly restrictive.

可以在固定“视口”内探索提供的空间的机制称为滚动。没有它，每个人的设备都必须始终具有完全相同的尺寸、形状和放大倍数。为这样的空间写内容会变成一种形式主义的游戏，就像写俳句一样。多亏了滚动，您在编写 Web 内容时不必担心空间问题。为印刷品写作没有同样的奢侈。

The mechanism whereby the provisioned space can be explored within a fixed “viewport” is called scrolling. Without it, everyone’s devices would have to be exactly the same size, shape, and magnification level at all times. Writing content for such a space would become a formalist game, like writing haiku. Thanks to scrolling, you don’t have to worry about space when writing web content. Writing for print does not have the same luxury.

writing-mode您可能最熟悉的 CSS是horizontal-tb. 在这种模式下，文本和内联元素水平前进（从左到右，如英语，或从右到左），块元素从上到下流动（这就是tb部分）。由于指示文本和内联元素换行，因此通常可以避免触发水平滚动的水平溢出。因为不允许内容向外伸，所以决心向下伸。块元素的垂直行进不可避免地触发垂直滚动。

The CSS writing-mode with which you are probably most familiar is horizontal-tb. In this mode, text and inline elements progress horizontally (either from left to right, as in English, or right to left) and block elements flow from top to bottom (that’s the tb part). Since text and inline elements are instructed to wrap, the horizontal overflow which would trigger horizontal scrolling is generally avoided. Because content is not permitted to reach outwards is resolves to reach downwards. The vertical progression of block elements inevitably triggers vertical scrolling instead.

作为习惯了horizontal-tb书写模式的西方读者，垂直滚动是常规和意料之中的。当您发现页面需要垂直滚动才能看到所有内容时，您不会认为出了什么问题。在遇到水平滚动的地方，它不仅出乎意料，而且具有明显的可用性含义：在溢出遵循书写方向的地方，必须滚动每一行连续的文本才能阅读。

As a Western reader, accustomed to the horizontal-tb writing mode, vertical scrolling is conventional and expected. When you find the page needs to be scrolled vertically to see all the content, you don’t think something has gone wrong. Where you encounter horizontal scrolling, it’s not only unexpected but has clear usability implications: where overflow follows writing direction, each successive line of text has to be scrolled to be read.

所有这一切并不是说在horizontal-tb书写模式下水平滚动是被严格禁止的。事实上，在有意且清晰地实施的情况下，垂直滚动页面中的水平滚动部分可能是一种符合人体工程学的浏览内容的方式。例如，电视流媒体服务倾向于按垂直类别和水平节目来剖析其内容。您真正想要避免的一件事是双向滚动的单个元素。根据 WCAG 的1.4.10 回流标准，这被视为失败。

All this is not to say that horizontal scrolling is strictly forbidden within a horizontal-tb writing mode. In fact, where implemented deliberately and clearly, horizontally scrolling sections within a vertically scrolling page can be an ergonomic way to browse content. Television streaming services tend to dissect their content by category vertically and programme horizontally, for example. The one thing you really want to avoid are single elements that scroll bidirectionally. This is considered a failure under WCAG’s 1.4.10 Reflow criterion.

我为 BBC 形式化了一个可访问的“旋转木马”组件——而不是完全遵从 JavaScript 的浏览功能——简单地调用带有溢出的本机滚动。提供的浏览按钮只是渐进增强，并增加滚动位置。每个 Layout 的Reel都是相似的，但放弃了 JavaScript 以单独依赖标准浏览器滚动行为。

I formalized an accessible “carousel” component for the BBC which—instead of deferring entirely to JavaScript for the browsing functionality—simply invokes native scrolling with overflow. The browsing buttons provided are merely a progressive enhancement, and increment the scroll position. Every Layout’s Reel is similar, but foregoes the JavaScript to rely on standard browser scrolling behavior alone.

解决方案

The solution

正如我们在The Cluster中所述，改变块流方向的有效方法是创建一个 Flexbox 上下文。通过应用display: flex到一个元素，它的子元素将从向下进行切换到向右进行——至少在默认的 LTR（从左到右）书写direction生效的地方是这样。

As we set out in The Cluster, an efficient way to change the direction of block flow is to create a Flexbox context. By applying display: flex to an element, its children will switch from progressing downwards to progressing rightwards — at least where the default LTR (left-to-right) writing direction is in effect.

通过省略经常补充的flex-wrap: wrap声明，元素被迫保持单一文件的形式。如果这行内容比父元素的宽度长，就会发生溢出。默认情况下，这将导致页面本身水平滚动。我们不希望这样，因为只有我们的 Flexbox 内容才真正需要滚动。其他一切都保持静止会更好。因此，我们改为应用于overflow: autoFlex 元素，它会自动调用该元素上的滚动，并且仅在确实发生溢出的地方调用。

By omitting the often complementary flex-wrap: wrap declaration, elements are forced to maintain a single-file formation. Where this line of content is longer than the parent element is wide, overflow occurs. By default, this will cause the page itself to scroll horizontally. We don’t want that, because it’s only our Flexbox content that actually needs scrolling. It would be better that everything else stays still. So, instead, we apply overflow: auto to the Flex element, which automatically invokes scrolling on that element and only where overflow does indeed occur.

.reel {
  display: flex;
  /* ↓ We only want horizontal scrolling */
  overflow-x: auto;
}

我还没有解决可见性（使元素看起来可滚动），还有间距问题需要解决，但这是布局的核心。因为它利用了标准的浏览器行为，所以它的代码极其简洁且健壮——与普通的旋转木马/滑块 jQuery 插件完全不同。

I’m yet to tackle affordance (making the element look scrollable), and there’s the matter of spacing to address too, but this is the core of the layout. Because it capitalizes on standard browser behavior, it’s extremely terse in code and robust — quite unlike your average carousel/slider jQuery plugin.

::-webkit-scrollbar {
}
::-webkit-scrollbar-button {
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-track-piece {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-corner {
}
::-webkit-resizer {
}

.reel {
  display: flex;
  /* ↓ We only want horizontal scrolling */
  overflow-x: auto;
  /* ↓ First value: thumb; second value: track */
  scrollbar-color: var(--color-light) var(--color-dark);
}

.reel::-webkit-scrollbar {
  block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
  background-color: var(--color-dark);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--color-dark);
  background-image: linear-gradient(var(--color-dark) 0, var(--color-dark) 0.25rem, var(--color-light) 0.25rem, var(--color-light) 0.75rem, var(--color-dark) 0.75rem);
}

.reel {
  block-size: 50vh;
}

.reel > img {
  block-size: 100%;
  width: auto;
}

.reel > * + * {
  margin-inline-start: var(--s1);
}

.reel {
  gap: var(--s1);
}

.reel {
  border-width: var(--border-thin);
}

.reel > * {
  margin: var(--s0);
  margin-inline-end: 0;
}

.reel::after {
  content: '';
  flex-basis: var(--s0);
  /* ↓ Default is 1 so needs to be overridden */
  flex-shrink: 0;
}

下面的实现假定您不需要在Reel元素本身上填充；因此使用的方法.reel > * + *就足够了。

The implementation to follow assumes you do not need padding on the Reel element itself; the approach using .reel > * + * therefore suffices.

这只是留下了孩子和滚动条（存在和可见的地方）之间的空间来处理。class="reel"没问题，您可能会想：只需在父级（此处）的底部添加一些填充即可。问题是，这会在Reel未溢出且未调用滚动条的地方创建冗余空间。

That just leaves the space between the children and the scrollbar (where present and visible) to handle. Not a problem, you may think: just add some padding to the bottom of the parent (class="reel" here). The trouble is, this creates a redundant space wherever the Reel is not overflowing and the scrollbar has not been invoked.

理想情况下，会有一个用于溢出/滚动元素的伪类。然后我们可以有选择地添加填充。目前，:overflowed-content伪类只是一个想法而已。现在，我们可以使用 JavaScript 和一个简单的ResizeObserver. 从本质上讲，这是一种渐进式增强技术：在 JavaScript 不可用或ResizeObserver不受支持的情况下，填充不会出现在溢出的Reel中——但几乎没有不利影响。它只是将滚动条按在内容上。

Ideally, there would be a pseudo-class for overflowing/scrolling elements. Then we could add the padding selectively. Currently, the :overflowed-content pseudo-class exists as little more than an idea. For now, we can apply the margin, and remove it using JavaScript and a simple ResizeObserver. Innately, this is a progressive enhancement technique: where JavaScript is unavailable, or ResizeObserver is not supported, the padding does not appear for an overflowing Reel — but with little detrimental effect. It just presses the scrollbar up against the content.

const reels = Array.from(document.querySelectorAll('.reel'));
const toggleOverflowClass = elem => {
  elem.classList.toggle('overflowing', elem.scrollWidth > elem.clientWidth);
};

for (let reel of reels) {
  if ('ResizeObserver' in window) {
    new ResizeObserver(entries => {
      toggleOverflowClass(entries[0].target);
    }).observe(reel);
  }
}

在观察者内部，将卷轴 scrollWidth与其clientWidth. 如果scrollWidth较大，overflowing则添加该类。

Inside the observer, the Reel’s scrollWidth is compared to its clientWidth. If the scrollWidth is larger, the overflowing class is added.

.reel.overflowing {
  padding-block-end: var(--s0);
}

我们还没有完全完成，因为我们还没有处理从Reel中动态删除子元素的情况。那也会有影响scrollWidth。我们可以抽象类切换函数并添加一个MutationObserver观察childList. MutationObserver几乎得到无处不在的支持。

We’re not quite done yet, because we haven’t dealt with the case of child elements being dynamically removed from the Reel. That will affect scrollWidth too. We can abstract the class toggling function and add a MutationObserver that observes the childList. MutationObserver is almost ubiquitously supported.

const reels = Array.from(document.querySelectorAll('.reel'));
const toggleOverflowClass = elem => {
  elem.classList.toggle('overflowing', elem.scrollWidth > elem.clientWidth);
};

for (let reel of reels) {
  if ('ResizeObserver' in window) {
    new ResizeObserver(entries => {
      toggleOverflowClass(entries[0].target);
    }).observe(reel);
  }

  if ('MutationObserver' in window) {
    new MutationObserver(entries => {
      toggleOverflowClass(entries[0].target);
    }).observe(reel, {childList: true});
  }
}

公平地说，如果仅用于添加或删除那一点填充，这有点矫枉过正。但是这些观察者可以用于其他增强功能，甚至超出样式。例如，对于键盘用户来说，溢出/可滚动的Reel采取tabindex="0"归属可能是有益的。这将使元素可以通过键盘聚焦，因此可以使用箭头键滚动。如果每个子元素都是可聚焦的，或者包含可聚焦的内容，则这可能不是必需的：聚焦元素会通过更改滚动位置自动将其带入视图。

It’s fair to say this is a bit overkill if only used to add or remove that bit of padding. But these observers can be used for other enhancements, even beyond styling. For example, it may be beneficial to keyboard users for an overflowing/scrollable Reel to take the tabindex="0" attribution. This would make the element focusable by keyboard and, therefore, scrollable using the arrow keys. If each child element is focusable, or includes focusable content, this may not be necessary: focusing an element automatically brings it into view by changing the scroll position.

用例

Use cases

Reel是旋转木马/滑块组件的强大而有效的解毒剂。正如已经讨论和演示的那样，它非常适合浏览事物类别：电影；产品; 新闻报道；照片。

The Reel is a robust and efficient antidote to carousel/slider components. As already discussed and demonstrated, it is ideal for browsing categories of things: movies; products; news stories; photographs.

此外，它还可用于取代按钮激活的菜单系统。对于许多人来说，Bradley Taunt 所说的香肠链接可能比“汉堡包”菜单更有用。对于这样的用例，可见滚动条可能相当笨拙。这就是为什么随后的自定义元素实现包含一个布尔noBar属性。

In addition, it can be used to supplant button-activated menu systems. What Bradley Taunt calls sausage links may well be more usable than “hamburger” menus for many. For such a use case, the visible scrollbar is probably rather heavy-handed. This is why the ensuing custom element implementation includes a Boolean noBar property.

当然，没有理由必须将链接做成香肠的形状！这只是一个词源宿醉。然而，需要注意的一件事是省略的滚动条所代表的缺乏启示。只要右侧最后一个可见的子元素被部分遮挡，就会相对清楚地发生溢出并且存在滚动能力。如果不是这种情况，则可能看起来所有可用元素都已在视图中。

There’s no reason why the links have to be shaped like sausages, of course! That’s just an etymological hangover. One thing to note, however, is the lack of affordance the omitted scrollbar represents. So long as the last visible child element on the right is partly obscured, it’s relatively clear overflow is occurring and the ability to scroll is present. If this is not the case, it may appear that all of the available elements are already in view.

从布局的角度来看，您可以通过避免某些类型的宽度来减少“一切似乎都在这里”的可能性。25%像或这样的百分比宽度33.333%会产生问题，因为——至少在没有间距的情况下——这会使元素恰好位于空间内。

From a layout perspective, you can reduce the likelihood of "Everything seems to be here" by avoiding certain types of width. Percentage widths like 25% or 33.333% are going to be problematic because—at least in the absence of spacing—this will fit the elements exactly within the space.

此外，您可以通过其他方式指示滚动的可用性。您可以利用观察员的overflowing课程来揭示文本说明（也许阅读“滚动更多”）：

In addition, you can indicate the availability of scrolling by other means. You can capitalize on the observers’ overflowing class to reveal a textual instruction (reading "scroll for more", perhaps):

.reel.overflowing + .instruction {
  display: block;
}

但是，这对当前滚动位置没有反应。您可以使用额外的脚本来检测元素何时一直滚动到任一侧，并相应地添加start或end类。不断创新的Lea Verou 设计了一种仅使用图像和 CSS 来实现类似效果的方法。阴影背景图像占据background-attachment: scroll并保留在可滚动元素的两端。“影子封面”背景图片随内容而background-attachment: local动。每当用户到达可滚动区域的一端时，这些“阴影覆盖”背景就会遮住下方的阴影。

However, this is not reactive to the current scroll position. You might use additional scripting to detect when the element is scrolled all the way to either side, and add start or end classes accordingly. The ever-innovative Lea Verou devised a way to achieve something similar using images and CSS alone. Shadow background images take background-attachment: scroll and remain at either end of the scrollable element. “Shadow cover” background images take background-attachment: local, moving with the content. Whenever the user reaches one end of the scrollable area, these “shadow cover” backgrounds obscure the shadows beneath them.

这些注意事项并不严格与布局相关，更多与通信相关，但值得进一步探索以提高可用性。

These considerations don’t strictly relate to layout, more to communication, but are worth exploring further to improve usability.

发电机

The generator

使用此工具生成基本的Reel CSS 和 HTML。您可能希望将ResizeObserver脚本与生成的代码一起包含在内。这是一个作为立即调用函数表达式 (IIFE) 实现的版本：

Use this tool to generate basic Reel CSS and HTML. You would want to include the ResizeObserver script along with the code generated. Here’s a version implemented as an Immediately Invoked Function Expression (IIFE):

(function() {
  const className = 'reel';
  const reels = Array.from(document.querySelectorAll(`.${className}`));
  const toggleOverflowClass = elem => {
    elem.classList.toggle('overflowing', elem.scrollWidth > elem.clientWidth);
  };

  for (let reel of reels) {
    if ('ResizeObserver' in window) {
      new ResizeObserver(entries => {
        toggleOverflowClass(entries[0].target);
      }).observe(reel);
    }

    if ('MutationObserver' in window) {
      new MutationObserver(entries => {
        toggleOverflowClass(entries[0].target);
      }).observe(reel, {childList: true});
    }
  }
})();

代码生成器工具仅在随附站点中可用。这是基本的解决方案，带有注释。为简洁起见，隐藏滚动条的代码已被删除，但可以通过自定义元素实现noBar中的属性获得。

The code generator tool is only available in the accompanying site. Here is the basic solution, with comments. The code that hides the scrollbar has been removed for brevity, but is available via the noBar property in the custom element implementation.

<div class="reel">
  <div><!-- child element --></div>
  <div><!-- another child element --></div>
  <div><!-- etc --></div>
  <div><!-- etc --></div>
</div>

.reel {
  /* ↓ Custom properties for ease of adjustment */
  --space: 1rem;
  --color-light: #fff;
  --color-dark: #000;
  --reel-height: auto;
  --item-width: 25ch;
  display: flex;
  block-size: var(--reel-height);
  /* ↓ Overflow */
  overflow-x: auto;
  overflow-y: hidden;
  /* ↓ For Firefox */
  scrollbar-color: var(--color-light) var(--color-dark);
}

reel-l::-webkit-scrollbar {
  /*
  ↓ Instead, you could make the scrollbar height
  a variable too. This is left as an exercise
  (be mindful of the linear-gradient!)
  */
  block-size: 1rem;
}

reel-l::-webkit-scrollbar-track {
  background-color: var(--color-dark);
}

reel-l::-webkit-scrollbar-thumb {
  background-color: var(--color-dark);
  /* ↓ Linear gradient ‘insets’ the white thumb within the black bar */
  background-image: linear-gradient(var(--color-dark) 0, var(--color-dark) 0.25rem, var(--color-light) 0.25rem, var(--color-light) 0.75rem, var(--color-dark) 0.75rem);
}

.reel > * {
  /*
  ↓ Just a `width` wouldn’t work because
  `flex-shrink: 1` (default) still applies
   */
  flex: 0 0 var(--item-width);
}

reel-l > img {
  /* ↓ Reset for images */
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

.reel > * + * {
  margin-inline-start: var(--space);
}

.reel.overflowing:not(.no-bar) {
  /* ↓ Only apply if there is a scrollbar (see the JavaScript) */
  padding-block-end: var(--space);
}

/* ↓ Hide scrollbar with `no-bar` class */
.reel.no-bar {
  scrollbar-width: none;
}

.reel.no-bar::-webkit-scrollbar {
  display: none;
}

(function() {
  const className = 'reel';
  const reels = Array.from(document.querySelectorAll(`.${className}`));
  const toggleOverflowClass = elem => {
    elem.classList.toggle('overflowing', elem.scrollWidth > elem.clientWidth);
  };

  for (let reel of reels) {
    if ('ResizeObserver' in window) {
      new ResizeObserver(entries => {
        for (let entry of entries) {
          toggleOverflowClass(entry.target);
        }
      }).observe(reel);
    }

    if ('MutationObserver' in window) {
      new MutationObserver(entries => {
        for (let entry of entries) {
          toggleOverflowClass(entry.target);
        }
      }).observe(reel, {childList: true});
    }
  }
})();

组件

The component

Reel 的自定义元素实现可供下载。

A custom element implementation of the Reel is available for download.

<reel-l itemWidth="20rem">
  <box-l>
    <stack-l>
      <!-- card content -->
    <stack-l>
  </box-l>
  <box-l>
    <stack-l>
      <!-- card content -->
    <stack-l>
  </box-l>
  <box-l>
    <stack-l>
      <!-- card content -->
    <stack-l>
  </box-l>
  <!-- ad infinitum -->
</reel-l>

<reel-l role="list" noBar>
  <div role="listitem">
    <a class="cta" href="/path/to/home">Home</a>
  </div>
  <div role="listitem">
    <a class="cta" href="/path/to/about">About</a>
  </div>
  <div role="listitem">
    <a class="cta" href="/path/to/pricing">Pricing</a>
  </div>
  <div role="listitem">
    <a class="cta" href="/path/to/docs">Documentation</a>
  </div>
  <div role="listitem">
    <a class="cta" href="/path/to/testimonials">Testimonials</a>
  </div>
</reel-l>

问题

The problem

position在 CSS 中定位，使用属性的relative、absolute和值的一个或多个实例fixed，就像手动覆盖 Web 布局一样。就是关掉自动布局，自己动手。与驾驶商用客机一样，除非在极少数和极端情况下，否则您不希望承担这种责任。

Positioning in CSS, using one or more instances of the position property’s relative, absolute, and fixed values, is like manually overriding web layout. It is to switch off automatic layout and take matters into your own hands. As with piloting a commercial airliner, this is not a responsibility you would wish to undertake except in rare and extreme circumstances.

在Frame文档中，您被警告避开浏览器的标准布局算法的危险：

In the Frame documentation, you were warned of the perils of eschewing the browser’s standard layout algorithms:

当你给一个元素position: absolute时，你将它从文档的自然流中移除。它把自己布置得好像它周围的元素不存在一样。在大多数情况下，这是非常不受欢迎的，并且很容易导致内容重叠和模糊等问题。

但是，如果您想通过在其上放置其他内容来遮盖内容怎么办？如果您在 Web 开发方面的工作时间超过 23 分钟，那么您很可能已经这样做过，包括对话框元素、“弹出窗口”或自定义下拉菜单。

But what if you wanted to obscure content, by placing other content over it? If you’ve been working in web development for more than 23 minutes, it’s likely you have already done this, in the incorporation of a dialog element, “popup”, or custom dropdown menu.

Imposter元素的目的是将通用叠加元素添加到您的布局套件中。它将允许作者将元素集中放置在视口、文档或选定的“定位容器”元素上。

The purpose of the Imposter element is to add a general purpose superimposition element to your layouts suite. It will allow the author to centrally position an element over the viewport, the document, or a selected “positioning container” element.

解决方案

The solution

有很多方法可以垂直居中放置元素，还有更多方法可以水平居中放置元素（一些替代方案作为中心布局的一部分被提及）。但是，只有几种方法可以将元素集中放置在其他元素/内容之上。

There are many ways to centrally position elements vertically, and many more to centrally position them horizontally (some alternatives were mentioned as part of the Center layout). However, there are only a few ways to position elements centrally over other elements/content.

同时期的方法是使用 CSS Grid。建立网格后，您可以按网格行号排列内容。流动的概念变得无关紧要，重叠在任何需要的地方都非常容易实现。

The contemporaneous approach is to use CSS Grid. Once your grid is established, you can arrange content by grid line number. The concept of flow is made irrelevant, and overlapping is eminently achievable wherever desired.

CSS Grid 并没有沉淀出一个通用的解决方案，因为它只有在你的定位元素display: grid提前设置好，并且列/行数合适的情况下才会起作用。我们需要更灵活的东西。

CSS Grid does not precipitate a general solution, because it would only work where your positioning element is set to display: grid ahead of time, and the column/row count is suitable. We need something more flexible.

.imposter {
  /* ↓ Position the top left corner in the center */
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  /* ↓ Reposition so the center of the element
  is the center of the positioning container */
  transform: translate(-50%, -50%);
}

.imposter {
  position: absolute;
  /* ↓ equivalent to `top` in horizontal-tb writing mode */
  inset-block-start: 50%;
  /* ↓ equivalent to `left` in horizontal-tb writing mode */
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  /* ↓ equivalent to `max-width` in horizontal-tb writing mode */
  max-inline-size: 100%;
  /* ↓ equivalent to `max-height` in horizontal-tb writing mode */
  max-block-size: 100%;
}

.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-inline-size: calc(100% - 2rem);
  max-block-size: calc(100% - 2rem);
}

.imposter {
  position: var(--positioning, absolute);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-inline-size: calc(100% - 2rem);
  max-block-size: calc(100% - 2rem);
}

<div class="imposter" style="--positioning: fixed">
  <!-- imposter content -->
</div>

用例

Use cases

任何需要故意模糊内容的地方，Imposter模式都是你的朋友。内容可能尚未提供。在这种情况下，冒名顶替者可能包含解锁该内容的号召性用语。

Wherever content needs to be deliberately obscured, the Imposter pattern is your friend. It may be that the content is yet to be made available. In which case, the Imposter may consist of a call-to-action to unlock that content.

可能是被Imposter遮挡的文物更具装饰性，不需要完整展示。

It may be that the artifacts obscured by the Imposter are more decorative, and do not need to be revealed in full.

使用Imposter创建对话框时，请注意需要包括的可访问性注意事项——尤其是那些与键盘焦点管理相关的注意事项。Inclusive Components有一个关于对话框的章节，详细描述了这些注意事项。

When creating a dialog using an Imposter, be wary of the accessibility considerations that need to be included—especially those relating to keyboard focus management. Inclusive Components has a chapter on dialogs which describes these considerations in detail.

发电机

The generator

使用此工具生成基本的Imposter CSS 和 HTML。

Use this tool to generate basic Imposter CSS and HTML.

代码生成器工具仅在随附的文档站点中可用。这是基本的解决方案，带有注释。该.contain版本在其定位容器中包含元素，并处理溢出。

The code generator tool is only available in the accompanying documentation site. Here is the basic solution, with comments. The .contain version contains the element within its positioning container, and handles overflow.

.imposter {
  /* ↓ Choose the positioning element */
  position: var(--positioning, absolute);
  /* ↓ Position the top left corner in the center */
  inset-block-start: 50%;
  inset-inline-start: 50%;
  /* ↓ Reposition so the center of the element
  is the center of the container */
  transform: translate(-50%, -50%);
}

.imposter.contain {
  /* ↓ Include a unit, or the calc function will be invalid */
  --margin: 0px;
  /* ↓ Provide scrollbars so content is not obscured */
  overflow: auto;
  /* ↓ Restrict the height and width, including optional
  spacing/margin between the element and positioning container */
  max-inline-size: calc(100% - (var(--margin) * 2));
  max-block-size: calc(100% - (var(--margin) * 2));
}

<div style="position: relative">
  <p>Static content</p>
  <div class="imposter">
    <p>Superimposed content</p>
  </div>
</div>

组件

The component

Imposter 的自定义元素实现可供下载。

A custom element implementation of the Imposter is available for download.

<div style="position: relative">
  <text-l words="150" aria-hidden="true"></text-l>
  <imposter-l>
    <box-l style="background-color: var(--color-light)">
      <p class="h4"><strong>You can’t see all the content, because of this box.</strong></p>
    </box-l>
  </imposter-l>
</div>

<imposter-l fixed>
  <dialog aria-labelledby="message">
    <p id="message">It’s decision time, sunshine!</p>
    <button type="button">Yes</button>
    <button type="button">No</button>
  </dialog>
</imposter-l>

问题

The problem

Every Layout中的大多数布局都采用块组件的形式，如果您不介意的话。也就是说，它们设置了一个块级上下文，在其中它们会影响其控件中子元素的布局。正如您将在Boxes中发现的那样，显示值为block、flex或grid的元素本身是块级的（flex并且grid通过以特殊方式影响其子元素而有所不同）。

Most of the layouts in Every Layout take the form of block components, if you’ll excuse the expression. That is, they set a block-level context wherein they affect the layout of child elements in their control. As you will discover in Boxes, elements with display values of either block, flex, or grid are themselves block-level (flex and grid differ by affecting their child elements in a special way).

在这里，我们将看到更小的东西，它不会比图标小很多。这将是自定义元素将保留其默认inline显示模式的第一个布局。

Here, we shall be looking at something a lot smaller, and it doesn’t get much smaller than an icon. This will be the first layout for which the custom element will retain its default inline display mode.

让事物排列整齐并看起来正确，内联可能是一项不稳定的业务。当谈到图标时，我们不得不担心这样的事情：

Getting things to line up and look right, inline can be a precarious business. When it comes to icons, we have to worry about things like:

• 图标与文字的距离
• 图标的高度与文字的高度对比
• 图标与文本的垂直对齐方式
• 当文本出现在图标之后而不是之前时会发生什么
• 调整文本大小时会发生什么

<svg viewBox="0 0 10 10" width="0.75em" height="0.75em" stroke="currentColor" stroke-width="2">
  <line x1="1" y1="1" x2="9" y2="9" />
  <line x1="9" y1="1" x2="1" y2="9" />
</svg>

<svg viewBox="0 0 10 10" width="0.75em" height="0.75em" stroke="currentColor" stroke-width="2">
  <path d="M1,1 9,9 M9,1 1,9" />
</svg>

<svg class="icon">
  <use href="/images/icons/icons.svg#cross"></use>
</svg>

解决方案

The solution

<svg viewBox="0 0 10 10" width="0.75em" height="0.75em" stroke="currentColor" stroke-width="2">
  <path d="M1,1 9,9 M9,1 1,9" />
</svg>

.icon {
  height: 0.75em;
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

正如 Andy 在Relative Sizing With EM units中所写，图标现在将随文本自动缩放：0.75emis relative to the font-sizefor the context。例如：

As Andy wrote in Relative Sizing With EM units, the icon will now scale automatically with the text: 0.75em is relative to the font-size for the context. For example:

.small {
  font-size: 0.75em;
}

.small .icon {
  /* Icon height will automatically be
    0.75 * 0.75em */
}

.big {
  font-size: 1.25em;
}

.big .icon {
  /* Icon height will automatically be
    1.25 * 0.75em */
}

<button>
  <svg class="icon">...</svg> Close
</button>

<button dir="rtl">
  <svg class="icon"></svg> Close
</button>

.icon {
  height: 0.75em;
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.icon {
  height: 0.75em;
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.with-icon .icon {
  margin-inline-end: var(--space, 0.5em);
}

用例

Use cases

你以前见过图标，对吧？大多数情况下，您会发现它们作为按钮控件或链接的一部分，用视觉提示补充标签。我们的控件常常只使用图标。这对于非常熟悉的图标/符号来说是可以的，比如前面示例中的十字图标，但更深奥的图标可能应该带有文本描述——至少在界面使用的早期阶段。

You’ve seen icons before, right? Most frequently you find them as part of button controls or links, supplementing a label with a visual cue. Too often our controls only use icons. This is okay for highly familiar icons/symbols like the cross icon from previous examples, but more esoteric icons should probably come with a textual description — at least in the early stages of the interface’s usage.

如果没有提供（可见的）文本标签，重要的是至少有某种形式的屏幕阅读器可感知的标签。您可以执行以下操作之一：

Where no (visible) textual label is provided, it’s important there is at least a screen reader perceptible label of some form. You can do one of the following:

1. 视觉隐藏文本标签（可能在 中提供<span>）
2. 添加一个<title>到<svg>
3. aria-label直接向父<button>元素添加一个

在组件中，如果将labelprop 添加到<icon-l>，元素本身将被视为图像，role="img"并aria-label="[the label value]"应用。屏幕阅读器遇到外部按钮或链接时，会将图标识别为图像或图形，并将aria-label值读出。<icon-l>放置在按钮或链接内的位置，图像作用不被宣布。伪图像元素只是用作标签。

In the component, if a label prop is added to <icon-l>, the element itself is treated as an image, with role="img" and aria-label="[the label value]" applied. Encountered by screen reader outside of a button or link, the icon will be identified as an image or graphic, and the aria-label value read out. Where <icon-l> is placed inside a button or link, the image role is not announced. The pseudo-image element is simply purposed as the label.

发电机

The generator

使用此工具生成基本的图标CSS 和 HTML。

Use this tool to generate basic Icon CSS and HTML.

代码生成器工具仅在随附站点中可用。这是基本的解决方案，带有注释。

The code generator tool is only available in the accompanying site. Here is the basic solution, with comments.

HTML

HTML

我们可以使用该<use>元素来嵌入来自远程icons.svg文件的图标。

We can employ the <use> element to embed the icon from a remote icons.svg file.

<span class="with-icon">
  <svg class="icon">
    <use href="/path/to/icons.svg#cross"></use>
  </svg>
  Close
</span>

CSS

CSS

with-icon仅当您希望消除自然单词空间并改为使用时才需要该课程margin。

The with-icon class is only necessary if you wish to eliminate the natural word space and employ margin instead.

.icon {
  height: 0.75em;
  /* ↓ Override the em value with `1cap`
  where `cap` is supported */
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

.with-icon {
  /* ↓ Set the `inline-flex` context,
  which eliminates the word space */
  display: inline-flex;
  align-items: baseline;
}

.with-icon .icon {
  /* ↓ Use the logical margin property
  and a --space variable with a fallback */
  margin-inline-end: var(--space, 0.5em);
}

正如我们的博客文章《无需 JavaScript 的动态 CSS 组件》style中所述，您可以使用属性以声明方式调整元素本身的空间值：

As outlined in our blog post Dynamic CSS Components Without JavaScript, you can adjust the space value declaratively, on the element itself, using the style attribute:

<span class="with-icon">
  <svg class="icon" style="--space: 0.333em">
    <use href="/images/icons/icons.svg#cross"></use>
  </svg>
  Close
</span>

组件

The component

图标的自定义元素实现可供下载。

A custom element implementation of the Icon is available for download.

<button>
  <icon-l space="0.5em">
    <svg>
      <use href="/images/icons/icons.svg#cross"></use>
    </svg>
    Close
  </icon-l>
</button>

<button>
  <icon-l label="Close">
    <svg>
      <use href="/path/to/icons.svg#cross"></use>
    </svg>
  </icon-l>
</button>

<button>
  <icon-l space="0.5em" label="Close" role="img" aria-label="Close">
    <svg>
      <use href="/path/to/icons.svg#cross"></use>
    </svg>
  </icon-l>
</button>